jquery - 删除/删除与类最近的元素

Question

我正在尝试删除/删除“.delete”按钮单击时最接近的“.step”。因此，它删除了 .delete 按钮上方的 .step 。

 <div class="step"></div>
 <div class="new"></div>
 <div class="delete"></div>

<div class="step"></div>
 <div class="new"></div>
 <div class="delete"></div>

<div class="step"></div>
 <div class="new"></div>
 <div class="delete"></div>

这是我的 jQuery：

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

我应该如何挖掘这一步？谢谢您的帮助！

Answer 1

鉴于 HTML，我建议：

$('.delete').click(function(){
    $(this).prevAll('.step').first().remove();    
});

JS 小提琴演示。

修改了上述内容（以防止第二次单击.delete元素时出现问题）：

$('.delete').click(function(){
    $(this).prevUntil('.delete').first().prev('.step').remove();
});

JS 小提琴演示。

.step虽然如果它是一个祖先，或者包裹在一个父元素中会容易得多：

<div>
    <div class="step"></div>
    <div class="new" id="addNextSlide"></div>
    <div class="delete"></div>
</div>

这将启用以下功能：

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

JS 小提琴演示。

参考：

• click().
• find().
• first().
• parent().
• prevAll().
• prevUntil().
• remove().

Answer 2

您有多个无效 html 的 ID。也许它只是一个例子，否则修复它。

要删除 div，您可以删除并仔细检查它是否具有正确的类，如下所示：

$('.delete').click(function () {
    var $wanted = $(this).prev().prev();
    if ($wanted.hasClass('step')) $wanted.remove();
});

演示在这里

Answer 3

选择 previous .new，然后选择 previous ，然后将.step其删除：

$('.delete').on('click', function(){
   $(this).prev('.new').prev('.step').remove();    
});

Answer 4

使用prev.

$('.delete-slide').click(function(){
    $(this).prev('div.step').remove();    
});