How can i create a button to delete a row?
Question
I have a table that dynamically adds a row after values are inputted. How can I add a delete button at the end of the table which will delete the row and the data that is appended in an array?
I am guessing one way to go about it is using classList and appending it to the last, which in this case is where the "X" delete button is placed in the table.
let myLibrary = []; function Book(titles, authors, pages, reads){ this.titles = titles, this.authors = authors, this.pages = pages, this.reads = reads } function addBookToLibrary(){ let t = document.getElementById("titles").value; let a = document.getElementById("authors").value; let p = document.getElementById("pages").value; let r = document.getElementById("reads").value; let book = new Book(t, a, p, r); myLibrary.push(book); } function deleteButton(){ let tds = document.querySelectorAll("td"); for (let i = 0; i < tds.length; i++){ let text = tds[i].innerText; if (text === "x"){ tds[i].classList.add("delete-btn"); } } } let subDisplay = document.getElementById("subDisplay"); subDisplay.addEventListener("click", displayDetails); let row = 1; function displayDetails(){ let title = document.getElementById("titles").value; let author = document.getElementById("authors").value; let pages = document.getElementById("pages").value; let read = document.getElementById("reads").value; let display = document.getElementById("display"); let newRow = display.insertRow(row); let cell1 = newRow.insertCell(0); let cell2 = newRow.insertCell(1); let cell3 = newRow.insertCell(2); let cell4 = newRow.insertCell(3); let cell5 = newRow.insertCell(4); cell1.innerHTML = title; cell2.innerHTML = author; cell3.innerHTML = pages; cell4.innerHTML = read; cell5.innerHTML = "x"; row++; modalBg.classList.remove("bg-active"); } let modalBtn = document.querySelector('.modal-btn'); let modalBg = document.querySelector('.modal-bg'); let modalClose = document.querySelector(".modal-close"); let submitBtn = document.querySelector(".submit-button"); modalBtn.addEventListener("click", function(){ modalBg.classList.add("bg-active"); }); modalClose.addEventListener("click", function(){ modalBg.classList.remove("bg-active"); });
*, *::after, *::before{ box-sizing: border-box; } nav { background-color: black; color: white; height: 35px; position: relative; } p { position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; } table { width: 100%; } th { text-align: left; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; }.modal-bg{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; }.bg-active{ visibility: visible; opacity: 1; }.modal{ position: relative; padding: 10px; font-family: "montserrat", sans-serif; background-color: white; width: 30%; height: 30%; display: flex; justify-content: space-around; align-content: center; flex-direction: column; }.modal-button{ padding: 10px 30px; background-color: black; color: white; border: none; font-family: "Montserrat", sans-serif; cursor: pointer; }.modal-close{ position: absolute; top: 10px; right: 10px; cursor: pointer; }.submit-button{ margin-top: 10px; margin-bottom: 10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src = "script.js" defer></script> <link rel = "stylesheet" href="styles.css"> </head> <body> <nav> <p>Library</p> </nav> <div class = displaytable> <table id = "display"> <tr> <th>Title</th> <th>Author</th> <th>Pages</th> <th>Read</th> <th>Remove</th> </tr> </table> </div> <button class="modal-btn">Add Book</button> <button class = "delete-btn">Delete Book</button> <div class="modal-bg"> <div class ="modal"> <h2>Book</h2> <label for="name">Title</label> <input type="text" name="name" id = "titles"> <label for="name">Author</label> <input type="text" name="name" id = "authors"> <label for="name">Pages</label> <input type="text" name="name" id = "pages"> <label for="name">Read</label> <input type="text" name="name" id = "reads"> <span class="modal-close">x</span> <button class="submit-button" id = "subDisplay" onclick="addBookToLibrary()">Submit</button> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2020-06-15 01:31:08
I would do this by keeping a track of the objects that are on the table using a structure such as an array. Create a separate array and update the same as you update the table. While doing so, do the following: html = `<tr><td>${item}</td><td><input type="button" onclick="remove('${item}')" value="Remove"></td></tr>`;
Next, add a function that will filter the array to remove the value you clicked from the same and then, recreate the table.
function remove(input) {
arr = arr.filter((value, index, arr) => { return value != input;});
updateTable();
}
I have made a fiddle to demonstrate the same:
https://jsfiddle.net/cruciformhawk7/ozcf3md4/
Edit: After looking at your update, this code might help you. https://jsfiddle.net/cruciformhawk7/gbuc0j8s/
Hope it helps.
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.