删除来自 JS DOM 中输入的 html 表项答案

【问题标题】：Delete item of html table coming from input in JS DOM删除来自 JS DOM 中输入的 html 表项
【发布时间】：2019-12-12 09:35:56
【问题描述】：

我在 JS 中删除 html 表中的操作时遇到问题。我试图删除来自输入的表项。没有任何反应。

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();
        } 
}

【问题讨论】：

我试过但没有用。
请添加您的 HTML 代码
jsfiddle.net/roop06/5w1psL6y

标签： javascript html jsdom pure-js

【解决方案1】：

我在这里看到两个问题：

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

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

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

【讨论】：

document.querySelector('.tbl').addEventListener("click",deleteItem); 它正在工作。谢谢。 JSFiddle：jsfiddle.net/roop06/5w1psL6y

【解决方案2】：

您的表格行是动态添加的，您在将内容加载到 dom 之前绑定事件侦听器（仅当您调用 addItem 方法时才会添加您的行）。您可以修复的一种方法是，在每次将内容附加到表后添加事件侦听器。

类似的东西

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

【讨论】：