How to remove all element with same id except one?

Question

Let say there's 3 times the same ID, I want to delete all of them except one. Example :

<div id = "parent_id">
     <div id = "id_1">
        <div id = "id_1-1"> </div>
        <div id = "id_1-1"> </div> // I want to delete this
        <div id = "id_1-1"> </div> // I want to delete this
        <div id = "id_1-2"> </div>
        <div id = "id_1-2"> </div> // I want to delete this
        <div id = "id_1-2"> </div> // I want to delete this
     </div>
     <div id = "id_2">
        <div id = "id_2-1"> </div>
        <div id = "id_2-1"> </div> // I want to delete this
        <div id = "id_2-1"> </div> // I want to delete this
        <div id = "id_2-2"> </div>
        <div id = "id_2-2"> </div> // I want to delete this
        <div id = "id_2-2"> </div> // I want to delete this
     </div>
     <div id = "id_3">
        <div id = "id_3-1"> </div>
        <div id = "id_3-1"> </div> // I want to delete this
        <div id = "id_3-1"> </div> // I want to delete this
        <div id = "id_3-2"> </div>
        <div id = "id_3-2"> </div> // I want to delete this
        <div id = "id_3-2"> </div> // I want to delete this
     </div>
</div>

Can it be done with a for loop ? Thanks in advance !

Answer 1

Assuming the duplicates follow the original, the following code does it

$('#parent_id').children('div').each(function(i, div) {
    var $first = $(div).children('div').first();
  var $next = $first.next('div');
  while($next.length > 0){
    if ($next.attr('id') === $first.attr('id'))
        $next.remove();
    else $first = $next;
    $next = $first.next('div');
  }
});

I created a fiddle.

But as everybody else mentioned, you have broken html, if you can change that id to say data-position, you'd fix that issue.

Answer 2

I did that for the unexpected on jquery, your id's are correctly because are uniques but it's ugly for who makes css for this file anyways i think it's called BEM...

That's my example:

$('#parent_id').children('div').each(function(i){
      let removed = $('#id_' + (++i)).children('div').each(function(){
        $(this).remove();
      });
      //Think the algorithm..
      $(this).append($(removed[0]).html());
      $(this).append($(removed[3]).html());
    });

https://jsfiddle.net/SirXploSiv/vtrL9p54/27/

Answer 3

You could select all the elements based on the common id,

var list = jQuery('[id^=id_]');

Then filter them further by if they match the more specific version, ie id_1-1, and are not the specific indexes you specify.

list = list.filter((idx,element)=>{
  //getElementIndex is a custom util function to get element's index
  let indexInParent = getElementIndex(element);
  //Check if the element has the specific id format, and is not an element
  //at the indexes to keep
  return element.id.match(/id_\d-\d/) && ![0,3].includes(indexInParent);
});

If needing a different criteria for what to remove or what not to remove you would just modify the filter() method logic to accommodate.

After that just remove them.

list.remove();

Note though you should not use the same id more than once. If these id's are containing some sort of information, that information should be stored in data-* attributes. And if all the removed element's have something in common it might be beneficial to label them with a common class or data-* attribute that way removal could be coded in less instructions.

jQuery('[id^=id_]').filter((idx,element)=>{
  let indexInParent = getElementIndex(element);
  return element.id.match(/id_\d-\d/) && ![0,3].includes(indexInParent);
}).remove();


function getElementIndex (element) {
  return Array.from(element.parentNode.children)
              .indexOf(element);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "parent_id">
     <div id = "id_1">
        <div id = "id_1-1">a </div>
        <div id = "id_1-1">b </div> 
        <div id = "id_1-1">c </div> 
        <div id = "id_1-2">d </div>
        <div id = "id_1-2">e </div> 
        <div id = "id_1-2">f </div> 
     </div>
     <div id = "id_2">
        <div id = "id_2-1">g </div>
        <div id = "id_2-1">h </div> 
        <div id = "id_2-1">i </div> 
        <div id = "id_2-2">j </div>
        <div id = "id_2-2">k </div> 
        <div id = "id_2-2">l </div> 
     </div>
     <div id = "id_3">
        <div id = "id_3-1">m </div>
        <div id = "id_3-1">n </div> 
        <div id = "id_3-1">o </div> 
        <div id = "id_3-2">p </div>
        <div id = "id_3-2">q </div> 
        <div id = "id_3-2">r </div> 
     </div>
</div>

Answer 4

Uh oh

You should never have elements with the same ID. You should never EVER have elements with the same ID. Browsers do wonky shit when you have elements with the same ID (which you should never do).

There is no practical answer to your question because if you have elements with the same ID, everything will be horrendously broken. Attempting to manipulate the DOM when there are elements with the same ID will only lead to frustration and crushed dreams. If you have reached a situation where you have elements with the same ID, you have already lost.

More helpful answer: You might be able to do it, but there are no guarantees. At this point, any DOM manipulation is most likely undefined behavior. On firefox, I had success building a list of ids and removing any duplicates like so:

var elements = document.querySelectorAll("*[id]");
var usedIds = {};

for(let i = 0; i < elements.length; i++) {
    const id = elements[i].getAttribute("id");
    if(usedIds[id]) {
        elements[i].parentNode.removeChild(elements[i]);
    } else {
        usedIds[id] = true;
    }
}

Answer 5

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

<element id="id">

You could use different attributes like class="yourname" or even your own attributes mycoolattribute="my little brother" to target multiple elements but keep in mind do not use multiple IDS! :)

---

Edit: You could use the query selector (jQuery) to catch the attribute called "ID" but I would really prefer to avoid this practice:

document.querySelectorAll('#myid')

---

I'm sure it is a good idea to have a close look at the docs!

Answer 6

Use the :not and :first pseudo classes of css like this

$("parent_id").children("div").find("div:not(:first)")).remove();