Question 43619 in Html Question posted in
Some basic documentation can be found here.

How to remove a table row when clicking on a button with JavaScript? – Html

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.

Tags:

2

Answers


  1. 0

    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. 0

    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