使用JS单击时删除多个输入

Question

我对我的项目进行了分页（无限制，无需点击），当加载下一页时，模态中的输入select2 input字段正在被复制。因此，经过一些滚动，我有几个重复。

所以我试图删除重复项，如：

$(".modalOpen").click(function(){
  $('.theLangu1:eq(0)').next("span").remove();
  $('.theLangu1').children().find(...).remove();
  $('.theLangu1:eq(1)').remove();
  ...
 })

但没有任何效果。代码在控制台中如下所示：

所以第一个需要保持活着，但其余的必须被删除。 （$('.theLangu1:eq(0)').remove();会删除除一个以外的所有内容，但它也会删除必要的内容，因此无效。）

另一个问题是我有多个<input>和其他select2字段，所以不能通过简单地删除所有内容（我尝试过）来完成。所以它需要成为$(".theLangu1").children().find/next...

方向的东西

这里有任何jQuery专家告诉我如何删除重复项或除第一项之外的所有输入？

Answer 1

为什么不将一个类添加到父级别说

$(".modalOpen").addClass('hideTheLangu1');

并维护css层次结构影响

.modalOpen.hideTheLangu1 .theLangu1:nth-child(n+2) {
    display: none
}

因此其中包含类theLangu1的所有项目都将被隐藏，因此您只需添加类hideTheLangu1 js代码，只需在需要再次显示它时删除该类（如果您有这样的用例）。如果你想从DOM中完全删除它，使用相同的方法并通过jQuery选择器（$(".modalOpen").find(".theLangu1:nth-child(n+2)"）选择除第一个之外的所有方法，并且只需调用remove()，你不需要做一个循环到each项目。

Answer 2

你可以遍历所有这些，删除它们但忽略第一个

for(let i=0;i<$('.theLangu1').length;i++) {
    if(i!==0){
        $('.theLangu1').eq(i).remove();
    }
}

或者在纯粹的jquery中

$('.theLangu1').not(':first').remove();

Answer 3

您可以使用not CSS伪造选择器

$('.theLangu1').parent()
  .find(".theLangu1:not('.theLangu1:first-child')")
  .remove();

您可以使用not JQuery方法

 $('.theLangu1').parent()
   .find(".theLangu1").not(".theLangu1:first-child")
   .remove();

https://jsfiddle.net/rwh7wd37/1/