How do I delete a specific row from a table?
Question
So I am creating a website that allows users to enter information about books they've read and it enters the information into a table. But I want the user to be able to delete a specific row (book) from the table if they click on a button.
I've added a click eventListener to the delete buttons but right now it is only deleting the row at the 0th index and sometimes it's deleting multiple rows at a time. I'm not sure why.
function addBooks() { let info = document.getElementById("author").value; let info2 = document.getElementById("title").value; let info3 = document.getElementById("genre").value; let info4 = document.getElementById("reviews").value; document.getElementById("author").value = ""; document.getElementById("title").value = ""; document.getElementById("genre").value = ""; document.getElementById("reviews").value = ""; let obj = { author: info, title: info2, genre: info3, review: info4, }; let table = document.getElementById("table"); const row = table.insertRow(1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); cell1.innerHTML = `${obj.author}`; cell2.innerHTML = `${obj.title}`; cell3.innerHTML = `${obj.genre}`; cell4.innerHTML = `${obj.review}<button id="delete" class="delete">Delete Book</button>`; document.querySelectorAll(".delete").forEach((item) => { item.addEventListener("click", (event) => { document.getElementById("table").deleteRow(1); }); }); }
<body> <div class="container"> <h1 class="heading">Your Books</h1> <p class="subHeading">Author</p> <input id="author"></input> <p class="subHeading">Title</p> <input id="title"></input> <p class="subHeading">Genre</p> <input id="genre"></input> <p class="subHeading">Reviews</p> <input id="reviews"></input> </div> <button class="btn" onclick="addBooks()" id="button">Submit</button> <table id="table"> <tr> <th>Author</th> <th>Title</th> <th>Genre</th> <th>Reviews</th> </tr> </table> <script src="books.js"></script> </body>
So the JavaScript allows the user to add new rows of information to the table. But they need to be able to delete specific rows as they click the delete buttons on that specific row.
I've added event listeners to the delete buttons but the function that reacts to the buttons clicking is only deleting the first row instead of the row that the button is clicked on.
Can anyone explain how to do this?
3 answers
solution1
0 2022-03-04 12:42:00
First of all, </input> is not a valid HTML tag, you should use <input type="..." /> instead.
There are many solutions to delete a row in a table, here is one. On click of the button , you find its closest tr and youremove it:
function addBooks() { let info = document.getElementById("author").value; let info2 = document.getElementById("title").value; let info3 = document.getElementById("genre").value; let info4 = document.getElementById("reviews").value; document.getElementById("author").value = ""; document.getElementById("title").value = ""; document.getElementById("genre").value = ""; document.getElementById("reviews").value = ""; let obj = { author: info, title: info2, genre: info3, review: info4, }; let table = document.getElementById("table"); const row = table.insertRow(1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); cell1.innerHTML = `${obj.author}`; cell2.innerHTML = `${obj.title}`; cell3.innerHTML = `${obj.genre}`; cell4.innerHTML = `${obj.review}<button onclick="this.closest('tr').remove()">Delete Book</button>`; }
<body> <div class="container"> <h1 class="heading">Your Books</h1> <p class="subHeading">Author</p> <input type="text" id="author" /> <p class="subHeading">Title</p> <input type="text" id="title" /> <p class="subHeading">Genre</p> <input type="text" id="genre" /> <p class="subHeading">Reviews</p> <input type="text" id="reviews" /> </div> <button class="btn" onclick="addBooks()" id="button">Submit</button> <table id="table"> <tr> <th>Author</th> <th>Title</th> <th>Genre</th> <th>Reviews</th> </tr> </table> <script src="books.js"></script> </body>
solution2
0 2022-03-04 12:48:29
Just create an onclick on your button that passes in its parent element using this.parentElement :
cell4.innerHTML = `${obj.review}<button id="delete" class="delete" onclick="deleteBook(this.parentElement)">Delete Book</button>`;
Then, remove its parent in the function:
function deleteBook(elem){
elem.parentElement.removeChild(elem);
}
solution3
0 ACCPTED 2022-03-04 12:54:08
There are many ways to delete the row, just as other answers have demonstrated.
The reason why your code is only deleting the first entry is because you put deleteRow(1) , which means "delete the row at index 1". Since the row at index 0 is your header, row at index 1 is your first entry.
And the reason why it sometimes delete everything is because you add event listener every time you add a new book. When you add the first book, the delete button will keep row index 1 as the reference to delete. When you add the second book, you add another event listener to the same button to delete the new row that you're adding. The previous reference is now at index 2. When you click that button, it will delete both the rows and index 1 and 2.
This is another way of doing it in JavaScript, using your code:
function addBooks() {
let info = document.getElementById("author").value;
let info2 = document.getElementById("title").value;
let info3 = document.getElementById("genre").value;
let info4 = document.getElementById("reviews").value;
document.getElementById("author").value = "";
document.getElementById("title").value = "";
document.getElementById("genre").value = "";
document.getElementById("reviews").value = "";
let obj = {
author: info,
title: info2,
genre: info3,
review: info4,
};
let table = document.getElementById("table");
const row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var deleteButton = document.createElement('button');
deleteButton.type = 'button';
deleteButton.textContent = 'Delete Book';
deleteButton.addEventListener('click', (event) => {
var row = deleteButton.parentNode.parentNode;
row.parentNode.removeChild(row)
})
cell1.innerHTML = `${obj.author}`;
cell2.innerHTML = `${obj.title}`;
cell3.innerHTML = `${obj.genre}`;
cell4.innerHTML = `${obj.review}`;
cell4.appendChild(deleteButton);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.