skip to Main Content

In this post, we will show you how to delete a table row (or column) using JavaScript when clicking on a button. We will use the querySelector() and querySelectorAll() methods to select the relevant DOM elements and the addEventListener() method to add a click event listener to the delete button. Finally, we will use the closest() method to select the parent element of the clicked button and remove it using the remove() method.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp">
    <input type="text" id="inp2">
    <button id="btn">Add</button><br><br>
    <table border="1">
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Supprimer</th>
            </tr>
    </table>
    <script src="sc.js"></script>
</body>
</html>


table{
    border-collapse: collapse;
}
.supp{
    border: none;
    cursor: pointer;
}

let table = document.querySelector("table")
let inp = document.querySelector("#inp")
let inp2 = document.querySelector("#inp2")
let btn = document.querySelector("#btn")
function remplir() {
    template = `<tr>
                <td>${inp.value}</td>
                <td>${inp2.value}</td>
                <td><button class="supp">Supper</button></td>
                </tr>`
    table.innerHTML+=template
    
    btn2 = document.querySelectorAll(".supp");
    btn2.forEach(btn => {
        btn.addEventListener("click", function() {
            //code remove 
        });
    });
}

btn.addEventListener("click",remplir);


This code adds a new row to the table when the "Add" button is clicked, and each row contains a "Delete" button that removes the corresponding row when clicked.

2

Answers


  1. Call remove method on the button’s parent node:

    btn.parentNode.parentNode.parentNode.remove();
    

    Or even easier with closest method, which finds tag for clicked button:

    btn.closest('tbody').remove();
    
    Login or Signup to reply.
  2. You can also use the onclick attribute to set the listener, and then remove the parent <tr> tag in remove(this).

    let table = document.querySelector("table")
    let inp = document.querySelector("#inp")
    let inp2 = document.querySelector("#inp2")
    let btn = document.querySelector("#btn")
    
    function remplir() {
      template = `<tr class="input-line">
                    <td>${inp.value}</td>
                    <td>${inp2.value}</td>
                    <td><button onclick="remove(this)" class="supp">Supper</button></td>
                    </tr>`
      table.innerHTML += template
    }
    
    function remove(that) {
      that.parentNode.parentNode.remove();
    }
    
    btn.addEventListener("click", remplir);
    table {
      border-collapse: collapse;
    }
    
    .supp {
      border: none;
      cursor: pointer;
    }
    <input type="text" id="inp">
    <input type="text" id="inp2">
    <button id="btn">Add</button><br><br>
    <table border="1">
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Supprimer</th>
      </tr>
    </table>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search