jquery - 使用 jQuery 删除 Bootstrap 缩略图

Question

我有很多缩略图，就像下面粘贴在我页面上的那个一样。我想要做的是使用删除按钮 (id=del) 删除其中一个。

我试过使用这段代码

$(this).parents('div');

但此代码删除了所有这些，这确实有意义，因为缩略图位于名为 lblProducts

的 div 中

我是 jQuery 的新手，我不清楚如何编写代码，所以它会准确地选择我要删除的缩略图。问题是我对所有缩略图使用相同的模式，并且所有元素都具有相同的类和 ID，所以我不能真正将它们用于我的过滤器。

 var sDivForProduct = '<div class="col-sm-6 col-md-3"> \
                                    <div class="thumbnail"> \
                                      <img class="imgProduct" src="{{stock-icon}}" alt="idiot forgot icon"> \
                                      <div class="caption"> \
                                        <h3>{{stock-name}}</h3> \
                                        <p>{{stock-price}}</p> \
                                        <i class="fa {{validation-icon}} fa-1x"></i> \
                                        <p><a href="#" class="btn btn-success" role="button">BUY</a> \
                                        <a href="#" id="del" class="btn btn-danger" role="button">DEL</a></p> \
                                      </div> \
                                    </div> \
                                  </div>';

Answer 1

应该这样做:(这个 onclick 方法适用于动态内容)

$(document).on('click', 'div.thumbnail #del', function() {
    $(this).parent().parent().parent().find('.imgProduct').remove();
});

// $(this)                DEL Button
// .parent()              P Tag
// .parent()              Div.caption
// .parent()              Div.thumbnail
// .find('.imgProduct')   Select Image
// .remove();             Remove it

---

更新:(删除整个 div)

$(document).on('click', 'div.thumbnail #del', function() {
    $(this).parent().parent().parent().parent().remove();
});

// $(this)                DEL Button
// .parent()              P Tag
// .parent()              Div.caption
// .parent()              Div.thumbnail
// .parent()              Div.col-sm-6.col-md-3
// .remove();             Remove it

---

更新:(使用 .closest())(归功于@gaetanoM)

与其使用多个 .parent()，不如使用 .closest() 更好；因此，这两个版本将是:

// Version 1 (Just image)
$(this).closest('.thumbnail').find('.imgProduct').remove();

// Version 2 (Whole div)
$(this).closest('.col-sm-6.col-md-3').remove();