CODEWITHSUNDEEP
javascript
Frances
Frances

Reputation: 11

how to target and delete one row from a table with Javascript?

I want to remove one specific row from the list in tbody after clicking on the delete button. Could you help me figure out how to make it work with plain javascript? I always get the error message "cannot get / a".

function updateUI() {
    var tbody = document.getElementById('entry-table');

    for (var i = 0; i < Storedcontact.length; i++) {
        var entry = Storedcontact[i];      

        var row = document.createElement("tr");
        row.innerHTML = `
        <td>${entry.name}</td>
        <td>${entry.surname}</td>
        <td>${entry.phone}</td>
        <td>${entry.email}</td>
        <td><a href="a" class="btn btn-danger btn-sm delete">Delete</a></td>
        <td><a href="a" class="btn btn-primary btn-sm edit">Edit</a></td>
        `;

        tbody.appendChild(row);


function clearFields() {
    document.getElementById("name").value = "";
    document.getElementById("surname").value = "";
    document.getElementById("phone").value = "";
    document.getElementById("email").value = "";
  }

  clearFields();

    }
}


tbody.addEventListener("click", function(ev) {
    ev.preventDefault()})

    function removeContact(event) {
        if (event.classList.contains("delete")) {
            event.parentElement.parentElement.remove();
        }
    }

Upvotes: 0

Views: 148

Answers (3)

A. Meshu
A. Meshu

Reputation: 4148

So basically you weren't that far. Here how you can do that:

const btns = document.querySelectorAll('table td button'); // the delete buttons
for (let i=0; i < btns.length; i++) { // you can use the modern forEach but this is faster
  btns[i].addEventListener('click', function() { // trigger event when hitting each button:
    this.closest('tr').remove(); // remove the line
  });
}
<table>
  <tr><td>line1 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line2 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line3 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line4 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line5 </td> <td> more </td> <td> <button>remove</button></td></tr>
</table>

You can read more about remove() on MDN and on closest() too. Enjoy Code!

Be aware, closest() is not supported in IE. Here's a function that mimics its functionality for your purposes:

function closestParent(element, tagName){
    try{
        while(element.tagName != tagName.toUpperCase()) element = element.parentNode;
        return element;
    }
    catch(e){
        return null;
    }
}

Upvotes: 1

jpmc
jpmc

Reputation: 1193

I like using inline javascript for this sort of thing, keeps it simple and easy to read.

<a href="a" class="btn btn-danger btn-sm delete" onClick="document.getElementById('entry-table').deleteRow(${i});">Delete</a></td>

Upvotes: 0

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2832

I gather that you want to delete them onclick? execute this code after all rows have loaded in the page:

var trs = document.getElementsByTagName("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){
        this.outerHTML = "";
    });
}

Upvotes: 0

Related Questions