删除来自 JS DOM 中输入的 html table 项

Question

我在 JS html table 中的删除操作有问题。我试图删除来自 input.It 的 table 项，但没有任何反应。

const name = document.querySelector(".name");
const surname = document.querySelector(".surname");
const age = document.querySelector(".age");
const addBtn = document.querySelector(".addBtn");
const deleteBtn = document.querySelector(".delete");
const tbody = document.querySelector(".tbl");

addBtn.addEventListener("click",addItem);
deleteBtn.addEventListener("click",deleteItem);

function addItem(e){
    var html = `<tr>
                    <td>${name.value}</td>
                    <td>${surname.value}</td>
                    <td>${age.value}</td>
                    <td class="delete">DELETE</td>
                </tr>`;
    if(name.value === '' || surname.value === '' || age.value === ''){
        alert("Warning!!!");
    }else{
        tbody.innerHTML += html;
    }
    e.preventDefault();
}
function deleteItem(e) {   
        if(e.target.className = 'delete'){
           e.target.parentElement.remove();
        } 
}

Answer 1

我在这里看到两个问题：

事件侦听器分配给第一个匹配的元素 '.delete'，并非所有元素
将通过 addItem 创建的按钮不会附加监听器

您可以使用 event delegation 解决这两个问题：将侦听器分配给共同的父级：

document.querySelector("table").addEventListener("click", deleteItem)

Answer 2

您的 table 行是动态添加的，您在内容加载到 dom 之前绑定事件侦听器（您的行仅在您调用 addItem 方法时添加） .您可以解决的一种方法是，在每次将内容附加到 table 后添加事件侦听器。

像这样

if(name.value === '' || surname.value === '' || age.value === ''){
     alert("Warning!!!");
}else{
     tbody.innerHTML += html;
     document.querySelector(".delete").addEventListener("click",deleteItem);
}

删除来自 JS DOM 中输入的 html table 项

Delete item of html table coming from input in JS DOM

html

javascript

jsdom

pure-js