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
Call remove method on the button’s parent node:
Or even easier with closest method, which finds tag for clicked button:
You can also use the
onclick
attribute to set the listener, and then remove the parent<tr>
tag inremove(this)
.