jQuery查找最近的类并将其删除

Question

我想在特定的delete类被点击时，删除整个list_product块。我非常新手jquery，还在学习中。

<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 2</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 3</div>
     </div>
</div>
<div class='list_product'>
    <div class='row'>
        <div class='delete'>x</div>
        <div class='title'>Standing Fan 4</div>
     </div>
</div>

Jquery:

$('.delete').click(function() {
   $(this).find('.list_product').remove();
});

代码不起作用，想知道原因并如何修复？谢谢。

- user1594367

---

此问题可能有所帮助：http://stackoverflow.com/questions/11376207/how-to-filter-articles-within-a-attr-href-with-each-and-find-usage-tag-list - Barlas Apaydin

Answer 1

只需执行$(this).closest('.list_product').remove()。
API参考：http://api.jquery.com/closest/
find在当前元素的子元素中搜索，而此处的.delete元素没有任何子元素。相反，closest从DOM向上查找，查找第一个具有类list_product的祖先元素。希望这能帮到您。

- Abraham

Answer 2

试试这个：

$(document).on('click', '.delete', function(e) {
   e.preventDefault();
   $(this).closest('.list_product').remove();
   return false;
});

- mmcachran

Answer 3

您可以在父元素上使用事件委托，或使用Closest方法。

Closest方法非常容易使用：

var id = $("button").closest("div").attr("id");

- Amyth