Question

我目前正在做作业，仅使用JavaScript在列表上添加和删除名称。我已经成功编码了如何删除和添加名称，但是我遇到了一个错误...添加名称后就无法删除。

<!DOCTYPE html>
<html>
<head>
    <title>JS DOM</title>
</head>
<body>
    <div>
        <h1 id="heading">JS DOM</h1>
        <ul>
            <li>
                <span>John</span>   
                <button class="del">Delete</button>
            </li>
            <li>    
                <span>Paul</span>   
                <button class="del">Delete</button> 
            <li>
                <span>George</span> 
                <button class="del">Delete</button>
            </li>   
            <li>
                <span>Ringo</span>  
                <button class="del">Delete</button>
            </li>
        </ul>
        <input id="input"  placeholder="Add Name">
        <button class="add">Add</button>
    </div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

let x = document.querySelector("ul");
let btn = document.querySelectorAll(".del")
let btn1 = document.querySelector(".add");

 x.addEventListener("click", function(e){
    if (e.target.className == "del"){
        const li = e.target.parentElement;
        x.removeChild(li)
    } 
 })

btn1.addEventListener("click", function(){
    let z = (input.value);
    let span = document.createElement("span");
    let node = document.createElement("li");
    let text = document.createTextNode(z);
    let x = document.querySelector("ul");

    let addBtn = document.createElement("button");
    addBtn.innerHTML = "Delete"

    span.appendChild(text);
    x.appendChild(node);
    node.appendChild(span);
    node.appendChild(addBtn);
});

似乎新添加的名称没有继承my的删除功能。我在这里看到了答案，但他们已经在使用JQuery，有没有办法仅使用JS来解决此问题？我现在对JS进行编码大约2周，如果有人在这里解释答案，那将对我有帮助。

非常感谢！

Answer 1

您快到了-事件委托处理程序会检查

if (e.target.className == "del"){
    const li = e.target.parentElement;
    x.removeChild(li)
}

因此，每个删除按钮都需要一个del类供处理程序识别并使用removeChild。这些类存在于您的原始HTML中：

<button class="del">Delete</button>

但不在您的附加元素中

let addBtn = document.createElement("button");
addBtn.innerHTML = "Delete"
// ...
node.appendChild(addBtn);

将addBtn的{{1}}设置为className，一切正常：

del

addBtn.className = 'del';

let x = document.querySelector("ul");
let btn = document.querySelectorAll(".del")
let btn1 = document.querySelector(".add");

x.addEventListener("click", function(e) {
  if (e.target.className == "del") {
    const li = e.target.parentElement;
    x.removeChild(li)
  }
})

btn1.addEventListener("click", function() {
  let z = (input.value);
  let span = document.createElement("span");
  let node = document.createElement("li");
  let text = document.createTextNode(z);
  let x = document.querySelector("ul");

  let addBtn = document.createElement("button");
  addBtn.className = 'del';
  addBtn.innerHTML = "Delete"

  span.appendChild(text);
  x.appendChild(node);
  node.appendChild(span);
  node.appendChild(addBtn);
});

您还可以考虑将其命名为<div> <h1 id="heading">JS DOM</h1> <ul> <li> <span>John</span> <button class="del">Delete</button> </li> <li> <span>Paul</span> <button class="del">Delete</button> <li> <span>George</span> <button class="del">Delete</button> </li> <li> <span>Ringo</span> <button class="del">Delete</button> </li> </ul> <input id="input" placeholder="Add Name"> <button class="add">Add</button> </div>，因为它会删除当前行。您也可以将其分配给元素的deleteBtn而不是附加textContent，以使您的代码不太冗长。此外，createTextNode并没有特别描述变量let node所包含的内容-可能将其称为node，因为它总是引用li：

<li>

const x = document.querySelector("ul");
const btn = document.querySelectorAll(".del")
const btn1 = document.querySelector(".add");

x.addEventListener("click", function(e) {
  if (e.target.className == "del") {
    e.target.parentElement.remove();
  }
})

btn1.addEventListener("click", function() {
  const span = document.createElement("span");
  const li = document.createElement("li");

  const deleteBtn = document.createElement("button");
  deleteBtn.className = 'del';
  deleteBtn.innerHTML = "Delete"

  span.textContent = input.value;
  x.appendChild(li);
  li.appendChild(span);
  li.appendChild(deleteBtn);
});

添加和删除子元素

1 个答案:

添加和删​​除子元素

1 个答案:

添加和删除子元素