Question

假设我有一个 div ，其中有一个按钮：

<td>
   <button [disabled]="item.editable"> Edit </button>
</td>

删除该 div 并且仅删除 div 的jQuery代码是什么因为我还有另一个按钮可以在上面动态添加该示例代码的副本。

所以我可能会遇到类似的情况，但是我只希望删除包含已按下按钮的 div 。

<div>
  <button id='delete_btn'>delete</button>
</div>

谢谢！

Answer 1

id不应在文档中重复。使用类代替。在点击处理程序函数中，您可以定位this元素的父元素以将其删除：

$(document).on('click', '.delete_btn', function(){
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class='delete_btn'>delete</button>
</div>

<div>
  <button class='delete_btn'>delete</button> 
</div>

Answer 2

可以使用Vanilla JS和更新的remove()方法轻松地执行此操作。如果不需要IE支持，请考虑以下事项：或者，如果需要IE支持，则无需修改以下内容：

document.addEventListener('click', function (e) {
  if (e.target.matches('.delete_btn'))
    e.target.parentNode.remove()
}, false);

<div>
  <button class='delete_btn'>delete 1</button>
</div>

<div>
  <button class='delete_btn'>delete 2</button>
</div>

事件/状态

这会将事件绑定到文档（按钮的祖先）。这样做的好处是，将在页面加载后动态创建的任何新删除按钮都将调用单击处理程序（并且仍将起作用）。

class vs id

这也使用 class 代替 id 。这是因为 id 应该保留给唯一值，而 class 旨在用作相似元素的句柄。如果使用相同的ID命名多个元素，JavaScript可能会产生意外行为。

remove（）

使用remove()可以按预期从DOM中删除一个元素。一种较旧的方法是在父级上调用removeChild()（例如parent=e.target.parentNode; parent.parentNode.removeChild(parent)）

更多ES6

当然，您可以使用named-argument / destructuring-assignment简化代码，该方法本质上是将event.target分配给名为btn的变量，并且可以使用通用箭头进一步简化代码功能。见下文。

document.addEventListener('click', ({target: btn})=>{
  btn.matches('.delete_btn') && btn.parentNode.remove()
}, false);

<div><button class='delete_btn'>delete 1</button></div>
<div><button class='delete_btn'>delete 2</button></div>

{target: btn}提取将传递到函数中的事件参数，并获取target属性的值，并将其分配给名为btn的新变量。如果您只有{target}（没有分配），则可以在函数主体中将btn替换为target（例如target.matches(…)，target.parentNode）

使用按钮删除DIV

2 个答案:

事件/状态

class vs id

remove（）

更多ES6