[英]How to delete a row in the table when I click on a button? Using Javascript
[英]How to i remove the row when i click delete button?
const Form = document.querySelector(".tracker-form"),
Name = document.querySelector(".tracker-name"),
Date = document.querySelector(".tracker-date"),
Amount = document.querySelector(".tracker-amount"),
Table = document.querySelector(".tracker-table"),
tableRow = document.createElement("tr");
function deleteRow(event) {
const button = event.target;
const row = button.parentNode;
tableRow.removeChild(row);
}
function addExpense() {
Form.addEventListener("submit", event => {
const tableName = document.createElement("td");
const tableDate = document.createElement("td");
const tableAmount = document.createElement("td");
const delButton = document.createElement("button");
delButton.innerHTML = "X";
delButton.addEventListener("click", deleteRow);
Table.appendChild(tableRow);
tableRow.appendChild(tableName);
tableRow.appendChild(tableDate);
tableRow.appendChild(tableAmount);
tableRow.appendChild(delButton);
tableName.innerHTML = Name.value;
tableDate.innerHTML = Date.value;
tableAmount.innerHTML = Amount.value;
Name.value = "";
Date.value = "";
Amount.value = "";
event.preventDefault();
})
}
function init() {
addExpense();
}
init();
我正在制作費用跟蹤器。 當我在名稱、日期、金額、值中輸入一個值時,每個表上都會顯示“x”按鈕。 當我單擊“x”按鈕時,我想刪除一行。 但它不起作用。 誰能告訴我為什么?
您可以簡單地刪除最近的tr元素:
function deleteRow(event) {
event.target.closest('tr').remove();
}
您需要區分parentNode
。
parentNode:parentNode屬性返回指定節點的父節點,為Node object。
close() 方法在 DOM 樹中搜索與指定 CSS 選擇器匹配的最近元素
$(".deleteRowButton").on("click", function(event){ var $closest = event.target.closest('tr'); var $parentNode = event.target.parentNode; // It just return `td` instead. console.log({closest: $closest, parentNode: $parentNode}); $closest.remove(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr><td>foo</td> <td><a class="deleteRowButton">delete_row</a></td></tr> <tr><td>bar bar</td> <td><a class="deleteRowButton">delete_row</a></td></tr> <tr><td>bazmati</td> <td><a class="deleteRowButton">delete_row</a></td></tr> </table>
可視化 output,如下所示:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.