Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

Question

Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

I'm facing an issue where I want to remove each line added by the user, one by one. However, my current program is removing all the rows from the table instead of just one at a time. The objective is to allow the user to remove a specific row if they choose to do so.

var pageTitle = document.getElementById("titulo");

pageTitle.addEventListener("click", function() {
  pageTitle.textContent = "Welcome to your agenda";
});


var addButton = document.getElementById("adicionar-contato");

addButton.addEventListener("click", addContact);

function addContact(event) {
  event.preventDefault();




  var contactTr = document.createElement("tr");

  var contactForm = document.getElementById("formulario");


  var nameTd = document.createElement("td");
  var emailTd = document.createElement("td");
  var phoneTd = document.createElement("td");
  var instaTd = document.createElement("td");
  var fbTd = document.createElement("td");
  var deleteTd = document.createElement("td");


  nameTd.textContent = contactForm.name.value;

  emailTd.textContent = contactForm.email.value;
  phoneTd.textContent = contactForm.phone.value;
  instaTd.textContent = contactForm.insta.value;
  fbTd.textContent = contactForm.fb.value;
  deleteTd.innerHTML = "<button class='btn btn-danger excluir'><i class='fa fa-trash-o' >Delete</i></button>";

  contactTr.appendChild(nameTd);
  contactTr.appendChild(emailTd);
  contactTr.appendChild(phoneTd);
  contactTr.appendChild(instaTd);
  contactTr.appendChild(fbTd);
  contactTr.appendChild(deleteTd);



  var agendaTable = document.getElementById("corpoAgenda");
  agendaTable.appendChild(contactTr);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>


<div class="p-5 text-black text-center bg-roxo">
  <h1 id="titulo">John Doe</h1>
</div>

<div class="container mt-5">
  <div class="container">

    <h5>Agenda</h5>
    <form id="formulario">
      <div class="row py-2">
        <div class="col-1">
          <label for="name">Name:</label>
        </div>
        <div class="col-5 ">
          <input type="text" class="form-control" placeholder="Enter first name" name="name">
        </div>
      </div>

      <div class="row py-2">
        <div class="col-1">
          <label for="email">Email:</label>
        </div>
        <div class="col-5">
          <input type="text" class="form-control" placeholder="email" name="email">
        </div>
        <div class="col-1">
          <label for="phone">Phone:</label>
        </div>
        <div class="col-5">
          <input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="phone">
        </div>
      </div>

      <div class="row py-2">
        <div class="col-1">
          <label for="insta">Instagram:</label>
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Instagram" name="insta">
        </div>
        <div class="col-1">
          <label for="fb">Facebook:</label>
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Facebook" name="fb">
        </div>
      </div>


      <div class="salvarexcluir">
        <button type="button" class="btn btn-info" id="adicionar-contato">Save</button>


        <button class='btn btn-danger exluir'><i class='fa fa-trash-o'>Delete</i></button>

      </div>



    </form>

  </div>


  <div class="container mt-3">
    <table class="table table-striped" id="myTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Instagram</th>
          <th>Facebook</th>
          <th>Delete</th>
        </tr>

        <tr>

      </thead>
      <tbody id="corpoAgenda">

      </tbody>
    </table>
  </div>

</div>

<div class="mt-5 p-4 bg-dark text-white text-center">

</div>

javascript html css bootstrap-5

Answer 1

Answer №1

Instead of implementing a global "delete" action for the table, you should assign the click event individually to each delete button in every row. This way, you can accurately reference and delete the desired row.

The crucial modification here is adding the following lines to your row creation function:

// attach the "delete" action to this button for this row
excluirTd.querySelector('button').addEventListener("click", () => {
  deletar(contatoTr)
})

Your previous code attempted to pass a reference to the button to the deletar function and then traverse back to its parent node to find the corresponding row and its rowIndex. However, this approach failed because the button's parent node was actually the <td> element instead of the desired <tr>. Although you could fix this by using parentNode.parentNode, it would be quite fragile. In my solution, I have streamlined the process by simply passing the row itself, as you already have a convenient reference to it in contatoTr.

See the demonstration below (with extraneous code and layout removed):

function deletar(tr) {
  var tabela = document.getElementById('myTable');
  tabela.deleteRow(tr.rowIndex);
}

var botaoAdd = document.getElementById("adicionar-contato");

botaoAdd.addEventListener("click", addContato);

function addContato(event) {
  event.preventDefault();

  //Creating a tr
  var contatoTr = document.createElement("tr");

  var formContato = document.getElementById("formulario");

  //Creating 06 tds
  var nomeTd = document.createElement("td");
  ...
  
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f14081409">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <form id="formulario">
    <div class="row py-2">
      <div class="col-1">
        <label for="nome">Name:</label>
      </div>
      ...

</div>

//Table to contain the data
<div class="container mt-3">
  <table class="table table-striped" id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Instagram</th>
        <th>Facebook</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody id="corpoAgenda">
    </tbody>
  </table>
</div>

Answer 2

Instead of implementing a global "delete" action for the table, you should assign the click event individually to each delete button in every row. This way, you can accurately reference and delete the desired row.

The crucial modification here is adding the following lines to your row creation function:

// attach the "delete" action to this button for this row
excluirTd.querySelector('button').addEventListener("click", () => {
  deletar(contatoTr)
})

Your previous code attempted to pass a reference to the button to the deletar function and then traverse back to its parent node to find the corresponding row and its rowIndex. However, this approach failed because the button's parent node was actually the <td> element instead of the desired <tr>. Although you could fix this by using parentNode.parentNode, it would be quite fragile. In my solution, I have streamlined the process by simply passing the row itself, as you already have a convenient reference to it in contatoTr.

See the demonstration below (with extraneous code and layout removed):

function deletar(tr) {
  var tabela = document.getElementById('myTable');
  tabela.deleteRow(tr.rowIndex);
}

var botaoAdd = document.getElementById("adicionar-contato");

botaoAdd.addEventListener("click", addContato);

function addContato(event) {
  event.preventDefault();

  //Creating a tr
  var contatoTr = document.createElement("tr");

  var formContato = document.getElementById("formulario");

  //Creating 06 tds
  var nomeTd = document.createElement("td");
  ...
  
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f14081409">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <form id="formulario">
    <div class="row py-2">
      <div class="col-1">
        <label for="nome">Name:</label>
      </div>
      ...

</div>

//Table to contain the data
<div class="container mt-3">
  <table class="table table-striped" id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Instagram</th>
        <th>Facebook</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody id="corpoAgenda">
    </tbody>
  </table>
</div>

Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

Answer №1

Similar questions

Is there a way for me to make this Select update when onChange occurs?

Implementing a distinct approach to adding margins to div boxes using

Discover the art of customizing child elements using vanilla extract!

What could be the reason behind the failure of this :after element?

After refreshing, a blank page appears when using the HTML POST method

Request for removal in Express.js

Controlling the page scroll when adding data using jQuery

What is the best way to retrieve the nearest form data with jQuery after a child input has been modified?

What is the best way to save the output of a middleware in express js so that it can be conveniently accessed by the rest of the

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

Stop all animations in JS and CSS

guide to importing svg file with absolute path

Is it possible to use TypeScript in a React Native project with a JavaScript file?

The mouse scurries away once the div height has been adjusted

Unraveling exceptions in Node.js akin to handling them in Java

What are the ways in which Angular can offer assistance to Internet Explorer 9?

I am experiencing issues with the customsort function when trying to sort a column of

The FontLoader feature seems to be causing issues when integrated with Vuejs

`What is the best way to employ the Return statement in programming?`

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent