时间戳

首页 > 解决方案 > 删除来自 JS DOM 中输入的 html 表项

javascript - 删除来自 JS DOM 中输入的 html 表项

问题描述

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

标签： javascripthtmljsdompure-js

解决方案

我在这里看到两个问题：

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

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

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

推荐阅读