How to make a button that creates a button when clicked (in HTML and JavaScript)?-CodePudding

Basically the question. My code (below) is quite lengthy and probably terrible as I am very new to coding. I am aware that I should put the JavaScript and HTML in different documents, but I prefer it like such. What I'd like to do is create a table, that, when users enter a column, a button appears next to the column giving them the option to delete it had they made a mistake.

document.getElementById("add").onclick = function() {

  var node = document.createElement("Tr");
  document.getElementById("list").appendChild(node);

  var node = document.createElement("Td");
  var text = document.getElementById("w").value;
  var textnode = document.createTextNode(text);
  node.appendChild(textnode);
  document.getElementById("list").appendChild(node);

  var node = document.createElement("Td");
  var text = document.getElementById("m").value;
  var textnode = document.createTextNode(text);
  node.appendChild(textnode);
  document.getElementById("list").appendChild(node);

  var node = document.createElement("Td");
  var text = document.getElementById("p").value;
  var textnode = document.createTextNode(text);
  node.appendChild(textnode);
  document.getElementById("list").appendChild(node);
}

<table id="list">
  <tr>
    <th scope="col">Word</th>
    <th scope="col">English</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tfoot>
    <tr>
      <div >
        <td><input type="text" id="w"  required/></td>
        <td><input type="text" id="m"  required/></td>
        <td><input type="text" id="p"  /></td>
      </div>
    </tr>
  </tfoot>
</table>
<div >
  <button  id="add">Enter</button>
</div>

CodePudding user response：

using JQuery Library in your Javascript would save you all the hustle with very simple and short codes

$("#add").on("click", function(){
    $("#list").html("your button element here");
});

to remove it

$("#yourbuttonID").on("click", function(){
    $(this).remove();
});

CodePudding user response：

Your code create incorrect HTML result. It becomes <tr></tr><td></td>... instead of <tr><td></td>...</tr>.

With current JavaScript, you can create new element using string and insert to exists HTML using insertAdjacentHTML(). It is a lot easier than create DOM object and appendChild().

document.getElementById("add").onclick = function() {
  let listTable = document.getElementById("list");
  let tfoot = listTable.querySelector('tfoot');

  let wordValue = document.getElementById("w").value;
  let engValue = document.getElementById("m").value;
  let pronunValue = document.getElementById("p").value;

  let trHTML = '<tr>'  
    '<td>'   wordValue   '</td>'  
    '<td>'   engValue   '</td>'  
    '<td>'   pronunValue   '<button  type="button" title="delete this row">x</button></td>'  
  '</tr>';
  
  tfoot.insertAdjacentHTML('beforebegin', trHTML);
}


// use event delegation to listen on click delete row.
document.addEventListener('click', (e) => {
  let thisTarget = e.target;
  let thisBtn = thisTarget.closest('.deletethis');
  if (thisBtn) {
    // if correct button then delete the whole table row (tr).
    e.preventDefault();
    thisTarget.closest('tr').remove();
  }
});

<table id="list">
  <tr>
    <th scope="col">Word</th>
    <th scope="col">English</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tfoot>
    <tr>
      <div >
        <td><input type="text" id="w"  required /></td>
        <td><input type="text" id="m"  required /></td>
        <td><input type="text" id="p"  /></td>
      </div>
    </tr>
  </tfoot>
</table>
<div >
  <button  id="add">Enter</button>
</div>

From the code above, I use the new querySelector(), closest() to select the near elements.

I use event delegation to detect delete row button were click and then delete the whole tr because newly created element can't detect when using normal addEventListener.