javascript - 如何使用 jQuery 删除此弹出窗口中的下两个 sibling ，并且仅删除下两个 sibling ？

Question

所以我有一个弹出窗口。您单击“+添加文本”链接，它会向页面添加一个文本框，以及另一个“+添加文本链接”和每个文本框右 Angular 跨度中的“x”。当我单击此弹出窗口中的“x”时，我希望它删除紧随其后的两个 sibling 。页面上生成的 HTML 看起来像这样......

 <div class="popup">
   <div class="delete-text-box-x">X</div>  
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
   <div class="delete-text-box-x">X</div>
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
   <div class="delete-text-box-x">X</div>
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
</div>

当我单击类为“delete-text-box-x”的 div 时>，我想删除以下两个 sibling 。也就是下面对应的textarea和“+Add Text”span。

我快要了。这是我的 jQuery

$('.delete-text-box-x').click(_.bind(function(e){
  $('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this)); 
}

很明显为什么这行不通。 nextUntil 方法确实选择并删除了“X”div 之后的文本框。但是选择器选择了页面上的每个“X”，因此删除了页面上的每个文本框。它也不会删除“+添加文本框”跨度...

那么如何获得比当前使用的选择器更具体的选择器呢？所以它只选择我点击的特定“X”，而不是页面上的每个“X”。

Answer 1

首先，您需要使选择器基于使用 this 关键字引发事件的元素。您可以从那里使用 nextUntil()，但您应该使用下一个 X 的选择器，以便找到所有必需的元素。最后，您需要使用 add() 来包含被点击的 X 本身。试试这个:

$('.delete-text-box-x').click(function (e) {
    $(this).nextUntil('.delete-text-box-x').add(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>

    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>

    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>
</div>

我还注意到您在点击处理程序中围绕匿名函数使用了一些奇怪的语法，我认为这是由于另一个库造成的。如果不是，您应该将其删除。