如何实现购物列表项删除功能？附代码示例及removeParent解析

一、基础删除功能代码示例（原生JavaScript） #

下面是一个简单的可删除购物列表实现，每个列表项自带删除按钮，点击后移除对应项：

<ul id="shopping-list">
  <li>
    Pasta
    <button class="delete-btn">删除</button>
  </li>
  <li>
    Eggs
    <button class="delete-btn">删除</button>
  </li>
</ul>

<script>
// 静态列表项的删除逻辑
const deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取按钮的父元素（即<li>）并移除
    this.parentElement.remove();
  });
});

// 如果是动态添加的列表项，用事件委托更可靠
document.getElementById('shopping-list').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    e.target.parentElement.remove();
  }
});
</script>

• 静态列表：直接给每个删除按钮绑定点击事件，点击时通过parentElement获取所在的<li>，调用remove()移除整个列表项。
• 动态列表：用事件委托把监听绑定到父容器<ul>上，不管后续新增多少列表项，删除按钮都能正常触发删除逻辑。

二、关于「removeParent」的说明 #

首先明确：原生JavaScript中不存在removeParent()这个方法，你大概率是混淆了jQuery的语法或者误记了方法名。

原生JS实现「删除父元素」的正确方式 #

如果你的需求是删除某个元素的父元素（比如删除按钮所在的<li>），原生JS可以这样写：

// 假设elem是目标子元素（比如删除按钮）
elem.parentElement.remove();

parentElement会获取当前元素的直接父节点，remove()方法则会把这个父节点从DOM中移除。

jQuery中的类似写法（可能是你误以为的「removeParent」） #

如果你在用jQuery库，常见的删除父元素写法是：

$(elem).parent().remove();

这里的parent()是jQuery方法，用来获取当前元素的父元素，再调用remove()删除该父元素——并不是一个叫removeParent的方法。

举个jQuery的完整示例：

<ul id="shopping-list">
  <li>
    Pasta
    <button class="delete-btn">删除</button>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 静态项删除
$('.delete-btn').click(function() {
  $(this).parent().remove();
});

// 动态项的事件委托
$('#shopping-list').on('click', '.delete-btn', function() {
  $(this).parent().remove();
});
</script>

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