How to remove specific element from element array in javascript or jquery

Question

Example:

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

How to select all element which have class="MyElement" and omit one element from it using specific id

My guess:

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

Expected result:

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

Answer 1

You can use :not() pseudo class inside selector.

$(".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>

Or you can use .not() method.

$(".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>

Answer 2

You could use the :not() selector for that

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

Demo:

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

Answer 3

Use this selector 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>

Doc

• :not() Selector