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

Issue

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 class="boxy_bois">
        <td><input type="text" id="w" class="w" required/></td>
        <td><input type="text" id="m" class="m" required/></td>
        <td><input type="text" id="p" class="p" /></td>
      </div>
    </tr>
  </tfoot>
</table>
<div class="button_boi">
  <button class="button_boi" id="add">Enter</button>
</div>

Solution

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 class="deletethis" 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 class="boxy_bois">
        <td><input type="text" id="w" class="w" required /></td>
        <td><input type="text" id="m" class="m" required /></td>
        <td><input type="text" id="p" class="p" /></td>
      </div>
    </tr>
  </tfoot>
</table>
<div class="button_boi">
  <button class="button_boi" 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.

Answered By – vee

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.