如何从javascript或jquery中的元素数组中删除特定元素

Posted 2023-05-09

【中文标题】如何从javascript或jquery中的元素数组中删除特定元素

【英文标题】：How to remove specific element from element array in javascript or jquery

【发布时间】：2018-08-13 07:00:51

【问题描述】：

例子：

<div id="Elmnt_1" class="MyElement">
<div id="Elmnt_2" class="MyElement">
<div id="Elmnt_3" class="MyElement">
<div id="Elmnt_4" class="MyElement">

如何选择所有具有 class="MyElement" 的元素并使用特定 id 从其中省略一个元素

我的猜测：

var fltrdElmnts = $(".MyElement").filter(! $( "#Elmnt_2" ) );
fltrdElmnts.remove();

预期结果：

<div id="Elmnt_2" class="MyElement">

【问题讨论】：

当您只想获取该元素时，使用$('#Elmnt_3') 怎么样？

@palash 实际上我想隐藏除一个特定元素之外的所有元素

好吧，我有点困惑，因为你有代码fltrdElmnts.remove();，如果你只想要一个元素，这是不必要的。

【参考方案1】：

您可以在选择器中使用:not() 伪类。

$(".MyElement:not(#Elmnt_2)")

$(".MyElement:not(#Elmnt_2)").css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Elmnt_1" class="MyElement">Div</div>
<div id="Elmnt_2" class="MyElement">Div</div>
<div id="Elmnt_3" class="MyElement">Div</div>
<div id="Elmnt_4" class="MyElement">Div</div>

或者你可以使用.not()方法。

$(".MyElement").not('#Elmnt_2')

$(".MyElement").not('#Elmnt_2').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Elmnt_1" class="MyElement">Div</div>
<div id="Elmnt_2" class="MyElement">Div</div>
<div id="Elmnt_3" class="MyElement">Div</div>
<div id="Elmnt_4" class="MyElement">Div</div>

【参考方案2】：

您可以为此使用:not() 选择器

var fltrdElmnts = $(".MyElement:not(#Elmnt_2");

演示：

$(function() 
  var fltrdElmnts = $(".MyElement:not(#Elmnt_2");
  fltrdElmnts.remove();
  /* or just:
  $(".MyElement:not(#Elmnt_2").remove();
  */
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Elmnt_1" class="MyElement">Elmnt_1</div>
<div id="Elmnt_2" class="MyElement">Elmnt_2</div>
<div id="Elmnt_3" class="MyElement">Elmnt_3</div>
<div id="Elmnt_4" class="MyElement">Elmnt_4</div>

【参考方案3】：

使用这个选择器MyElement:not(#Elmnt_2)

var fltrdElmnts = $(".MyElement:not(#Elmnt_2)");
fltrdElmnts.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Elmnt_1" class="MyElement">a</div>
<div id="Elmnt_2" class="MyElement">b</div>
<div id="Elmnt_3" class="MyElement">c</div>
<div id="Elmnt_4" class="MyElement">d</div>

文档

:not() Selector