如何使用 jQuery 删除此弹出窗口中接下来的两个兄弟姐妹，并且仅删除接下来的两个兄弟姐妹？

Question

所以我有一个弹出窗口。您单击“+Add Text”link，它会向页面添加一个文本框，同时在右侧的 span 中添加另一个“+Add Text link”和 "x"每个文本框的角。当我单击此弹出窗口中的 "x" 时，我希望它删除紧随其后的两个兄弟姐妹。页面上生成的 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>

当我点击带有 class "delete-text-box-x"> 的 div 时，我希望删除以下两个兄弟。即下面对应的textarea和“+Add Text”span。

我快搞定了。这是我的 jQuery

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

很明显为什么这不起作用。 nextUntil 方法确实 select 并删除了 'X' div 之后的文本框。但是页面上的 select 或 selects 每个 'X'，因此会删除页面上的每个文本框。它也不会删除“+添加文本框”跨度...

那么如何获得比当前 select 或我正在使用的更具体的信息？所以它 select 只是我点击的特定 '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>

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

Answer 2

这 until 可以找到兄弟姐妹中的另一个元素，因此在上面的代码中，您选择了下一个添加文本框而不是下一个 X 图标。

$('.delete-text-box-x').click(function() {

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

如何使用 jQuery 删除此弹出窗口中接下来的两个兄弟姐妹，并且仅删除接下来的两个兄弟姐妹？

How do I delete the next two siblings and ONLY the next two siblings in this pop-up using jQuery?

javascript

jquery

traversal

siblings

jquery-selectors