Remove all the elements but keep 1 element with data-id = x using jQuery?

jquery remove element by id
jquery remove not working
jquery remove text
jquery remove child element from parent
jquery clear div content before append
jquery empty not working
remove javascript
how to remove selected element in jquery

The only way to make this question clear is to give you an example.

I have a list of elements on my HTML page. Each element has its own data-id, and there are some duplicate values.

I need to use jQuery to remove all the elements but keep 1 element that has the data-id= x. x is the number of data-id=….

so for example:

I have a data-id="44444"

I need to delete all the elements from my page (including the duplicated ones) but keep 1 element which has the data-id="44444"

Here is what I have so far:

	  var seen = {};
		$('.myLi').each(function() {
		var dataId = $(this).attr('data-id');
		if (seen[dataId])
        $(this).remove();
		else
        seen[dataId] = true;
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="deviceList" class="deviceList">
 
 <li data-device-id="44444" class="myLi" data-id="44444">44444</li>
 
 <li data-device-id="44444" class="myLi" data-id="44444">44444</li>
 
 <li data-device-id="4234" class="myLi" data-id="4234">4234</li>
 
 <li data-device-id="4234" class="myLi" data-id="4234">4234</li>
 
 <li data-device-id="476444" class="myLi" data-id="476444">476444</li>
 
  
</ul>

// Get rid of all data-ids you do not want
$('.myLi').not('[data-id="44444"]').remove();
// Clean up the extras
$('.myLi').each((n, el) => {
  if (n > 0) {
    $(el).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="deviceList" class="deviceList">

  <li data-device-id="44444" class="myLi" data-id="44444">44444</li>

  <li data-device-id="44444" class="myLi" data-id="44444">44444</li>

  <li data-device-id="4234" class="myLi" data-id="4234">4234</li>

  <li data-device-id="4234" class="myLi" data-id="4234">4234</li>

  <li data-device-id="476444" class="myLi" data-id="476444">476444</li>


</ul>

jQuery.removeData(), element. Type: Element. A DOM element from which to remove data. name key, jQuery.removeData() deletes that particular value; when called with no arguments, all values are removed. <script src="https://code.jquery.com/jquery-​3.4.1.js"></script> Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer  In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. The following example will remove all the <p> elements with the class .hint from the DOM on button click. Nested elements inside these paragraphs will be removed, too.


.empty(), Description: Remove all child nodes of the set of matched elements from the DOM. any string of text within an element is considered a child node of that element. 1. 2. 3. 4. <div class="container">. <div class="hello">Hello</div> such as data and event handlers from the child elements before removing the elements  However, in order to save resources and avoid potential problems with memory leaks, remove() deletes all jQuery data and events associated with the removed elements. For example, if you’ve assigned a jQuery click event to an element, and you then remove the element from the page using remove(), the click event is removed from the element


Find all the lis. Then for each element, find all the lis with the same data-id and get the ones that are not the first of that data-id, then remove them.

var $lis = $('.myLi');

$lis.filter(function(){
  return !$lis.filter(`[data-id="${this.dataset.id}"]`).first().is(this);
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="deviceList" class="deviceList">
  <li data-device-id="44444" class="myLi" data-id="44444">44444 1</li>
  <li data-device-id="44444" class="myLi" data-id="44444">44444 2</li>
  <li data-device-id="4234" class="myLi" data-id="4234">4234 1</li>
  <li data-device-id="4234" class="myLi" data-id="4234">4234 2</li>
  <li data-device-id="476444" class="myLi" data-id="476444">476444</li>
</ul>

jQuery remove() Method, The remove() method removes the selected elements, including all text and child nodes. Tip: To remove the elements without removing data and events, use the detach() method instead. Specifies one or more elements to be removed. 1: selector1: Specify the element you want to select and remove from the page. It is the required field. 2: selector2: Specify the element id or class name with this second parameter. You can select multiple element of same tag name using comma separated id or classname. It is the optional field.


Dynamically add and remove element with jQuery, In this post, I show how you can add and remove new element within Pre-made all elements; Dynamically create a new element a <div class='element' id='​div_1'> which have one textbox and a <span + nextindex + "' class='remove'>X​</span>"); } }); // Remove element Thank you bro save me life. This code is longer than some of the others, but the double-nested loop should make its operation obvious. The advantage of this approach is that it only has to scan the DOM to generate the list of elements with an id attribute once, and then uses the same list to find (and remove) the duplicates.


Beyond jQuery, The setData function has been set up to accept an element, data key, and data object in cache using the array index stored in the data-cache-idx But this all-​browser non-jQuery solution is surprisingly simple. It would be useful to remove items from the cache when corresponding elements are removed from the DOM. $('span').slice(1).remove(); slice() Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. start Type: Integer An integer indicating the 0-based position at which the elements begin to be selected.


jQuery, It contains well written, well thought and well explained computer science and programming articles, quizzes and It is used to specify one or more attributes to remove. Several Return Value: This method returns the selected element with the removed attribute. Below example illustrates the removeAttr() method in jQuery:. Answer: Use the jQuery unwrap() method. Sometime you might require to remove the wrapper or parent element, a typical example is removing the anchor tag around the text. With jQuery unwrap() method you can easily remove the wrapper element and keep the inner HTML or text content intact.