Question

所以我有一个弹出窗口。单击“+添加文本”链接，它会向页面添加一个文本框，以及每个文本框右下角的另一个“+添加文本链接”和“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>

当我点击“delete-text-box-x”＆gt;类的div时，我希望删除以下两个兄弟姐妹。也就是说，以下相应的textarea和“+ Add Text”跨度。

我几乎拥有它。这是我的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本身。试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

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

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

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

如何使用jQuery删除此弹出窗口中的下两个兄弟姐妹和下两个兄弟姐妹？

2 个答案: