添加和删 除子元素

问题描述 投票：2回答：1

我目前正在做家庭作业，只使用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);
});

似乎新添加的名称没有继承我的删除功能。我在这里看到了答案，但他们已经在使用JQuery了，有没有办法只使用JS来解决这个问题？我现在正在编写JS大约两周的时间，如果有人在这里解释答案，那对我来说真的很有帮助。

非常感谢！

javascript dom
1个回答
2
投票

你几乎就在那里 - 你的事件委托处理程序检查

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的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);
});
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.