I want to hide the button after adding my name and nickname three times, and I want to make it impossible

I am learning javascript.
I want to hide the button after adding the name and nickname three times, and not add it after that.
I have made it impossible to add it after the third time, but I have not been able to hide the button.
Also, use the table tag and associated tags to display the added names and nicknames for up to three people.If you add three additional data items to delete the add button, but the delete button deletes the data and less than three items, you should redisplay the add button so that you can re-add it until there are three items.These conditions must be met at the same time, but they should be met.
I would appreciate it if you could teach me

<!DOCTYPE html>
<html>
    <head>
        <title> Account Registration</title>
        <metacharset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
    <body>
        <div class="base container">
          <div class="row">
            <h1>Account Registration</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control"placeholder="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control"placeholder="nickname">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="turoku" value="add">
                    </div>
                    <table id="result-table">
                      <thead>
                      <tr>
                      <th>Name</th>
                      <th> Nickname</th>
                      <th>Delete </th>
                      </tr>
                      </thead>
                      </table>
                      
                </form>
                <divid="tuikaMoto">

                </div>
                <divid="result"></div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <divid="overlay">
      </div>

<script>
  classNameTable {
constructor(){
This.data=[];
This.table= document.getElementById('result-table');
this.tbody=this.table.createTBody();
This.btn = document.getElementById("tuikaBtn");
This.input_namae= document.getElementById("namae");
This.input_nickname = document.getElementById("nickname");
}

handleEvent(e){
if(e.target===this.btn){
const name_value = this.input_namae.value,
nickname_value = this.input_nickname.value;
if(this.checkTsuika(name_value,nickname_value)){
This.pushData(name_value, nickname_value);
This.createTable();
};
} else if(e.target.matches('.del')}{
This.clickDel(e.target);
}
}

pushData(name,nickname){
/* If you want to add it to a DB, you can communicate with fetch here*/
This.data.push({name:name,nickname:nickname});
window.alert(`[${name}] registered with [${nickname}]'`);
This.input_namae.value=';
This.input_nickname.value=';
if(this.data.length>2){
Object.assign(this.btn,{
  value: '' ,
  disabled: true,

});
}
}

createTable(){
while(this.tbody.firstChild){
This.tbody.removeChild(this.tbody.firstChild);
}
This.data.forEach(d=>{
const tr = this.tbody.insertRow(-1);
tr.insertCell(0).appendChild( document.createTextNode(d.name));
tr.insertCell(1).appendChild( document.createTextNode(d.nickname)));
const input_del = document.createElement('input');
Object.assign(input_del,{
type: 'button',
value: 'Delete',
className: 'del',
});
tr.insertCell(2).appendChild(input_del);
});
}

checkTsuika(name,nickname){
if(name==="||nickname===""){

return false;
}
if(!this.data.every(d=>d.name!==name)){

return false;
}
Register return window.confirm(`[${name}]-san[${nickname}].Are you sure?"`);
}

clickDel(target){
/* Send delete via fetch etc*/

const dels=[...this.tbody.querySelectorAll('.del')];
This.data=this.data.filter(_,i)=>dels[i]!==target);
This.createTable();
Object.assign(this.btn,{
value: 'Add button',
disabled: false,
});
}
}

// execution
window.addEventListener('DOMContentLoaded',()=>{
const table = new NameTable();
document.addEventListener('click', table, false);
});

</script>
    </body>
</html>

javascript

2022-09-30 16:33

1 Answers

I understood that you are trying to display/hide buttons in the part where Object.assing is set on the button, but do you want to erase the button itself?
If you want to erase it,