点击删除按钮删除无序列表对应项的JavaScript实现问题

嘿，作为JavaScript初学者，你遇到的这个问题很典型，我来一步步帮你搞定它！

首先先说说你现有代码的几个小问题：

• 你的HTML里只有第一个Delete按钮有id="delete"，但getElementById()只能获取到页面中第一个匹配该id的元素，所以其他按钮根本没绑定点击事件。
• togList = document.getElementsByTagName("li")拿到的是所有li元素的集合，不是单个元素，所以直接用togList.parentNode肯定会报错。

接下来给你两种不用索引就能实现功能的方法，推荐第一种事件委托的方式，更灵活高效：

方法一：事件委托（推荐） #

事件委托的核心思想是把事件绑定在父元素上，利用事件冒泡机制来处理子元素的事件。这样不管是现有列表项还是以后动态添加的，都能生效。

修改后的HTML（只需要去掉第一个按钮的id，因为不需要单独标识了） #

<body>
  <h1>Shopping List</h1>
  <p id="first">Get it done today</p>
  <input id="userinput" type="text" placeholder="enter items">
  <button id="enter">Enter</button>
  <ul>
    <li>Notebook <button>Delete</button></li>
    <li>Jello <button>Delete</button></li>
    <li>Spinach <button>Delete</button></li>
    <li>Rice <button>Delete</button></li>
    <li>Birthday Cake <button>Delete</button></li>
    <li>Candles <button>Delete</button></li>
  </ul>
  <script type="text/javascript" src="script.js"></script>
</body>

修改后的JavaScript代码 #

let enterListBtn = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");

// 事件委托：给ul绑定点击事件
ul.addEventListener("click", function(event) {
  // 判断点击的元素是否是Delete按钮
  if (event.target.tagName === "BUTTON" && event.target.textContent === "Delete") {
    // 找到按钮的父元素li，然后删除它
    event.target.parentElement.remove();
  }
});

// 顺便把添加列表项的功能也补全（如果需要的话）
enterListBtn.addEventListener("click", function() {
  const inputText = input.value.trim();
  if (inputText) {
    const li = document.createElement("li");
    li.textContent = inputText + " ";
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    li.appendChild(deleteBtn);
    ul.appendChild(li);
    input.value = "";
  }
});

代码解释 #

• event.target指的是实际被点击的元素，我们判断它是不是Delete按钮。
• event.target.parentElement就能直接拿到按钮对应的父元素<li>，然后调用remove()方法删除它，完全不需要用索引！

方法二：给每个按钮单独绑定事件 #

如果不想用事件委托，也可以遍历所有Delete按钮，给每个按钮绑定点击事件：

JavaScript代码 #

let enterListBtn = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");

// 给现有所有Delete按钮绑定事件
function bindDeleteEvents() {
  const deleteBtns = document.querySelectorAll("li button");
  deleteBtns.forEach(btn => {
    btn.addEventListener("click", function() {
      // this指的是当前被点击的按钮，它的父元素就是对应的li
      this.parentElement.remove();
    });
  });
}

// 页面加载完成后先绑定一次
bindDeleteEvents();

// 添加列表项的功能（如果需要的话）
enterListBtn.addEventListener("click", function() {
  const inputText = input.value.trim();
  if (inputText) {
    const li = document.createElement("li");
    li.textContent = inputText + " ";
    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    li.appendChild(deleteBtn);
    ul.appendChild(li);
    input.value = "";
    // 新添加按钮后要重新绑定事件
    bindDeleteEvents();
  }
});

注意点 #

这种方法需要注意：每次动态添加新的列表项后，都要重新调用bindDeleteEvents()给新按钮绑定事件，不然新按钮会没反应。而事件委托就不需要这一步，这也是为什么推荐它的原因～

内容的提问来源于stack exchange，提问作者izee