Javascript 如何使用jQuery删除该弹出窗口中的下两个同级，并且仅删除下两个同级？

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

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

---

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

首先，您需要将选择器基于使用

this

关键字引发事件的元素。从那里可以使用

nextUntil（）

，但应该使用下一个

X

的选择器，以便找到所有必需的元素。最后，您需要使用

add（）

来包含单击的

X

本身。试试这个：

$（'.delete-text-box-x'）。单击（函数（e）{
$（this）.nextUntil（'.delete-text-box-x'）.add（this）.remove（）；
});

X
+添加文本
X
+添加文本
X
+添加文本
这将在同级中查找另一个元素，因此在上面的代码中，您选择的是下一个添加文本框，而不是下一个X图标

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

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

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

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