0

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

4

2 回答 2

0

我在这里看到两个问题：

  1. 事件侦听器被分配给第一个匹配的元素 '.delete'，而不是所有元素
  2. 将通过创建的按钮不会将addItem侦听器附加到它们

您可以通过使用事件委托来解决这两个问题：将侦听器分配给一个共同的父级：

document.querySelector("table").addEventListener("click", deleteItem)
于 2019-12-12T09:53:04.563 回答
0

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

像这样的东西

if(name.value === '' || surname.value === '' || age.value === ''){
     alert("Warning!!!");
}else{
     tbody.innerHTML += html;
     document.querySelector(".delete").addEventListener("click",deleteItem);
}
于 2019-12-12T09:58:57.803 回答