CODEWITHSUNDEEP
javascripthtmljquery
user11710915
user11710915

Reputation: 434

How to remove a duplicate ID in a li which has a specific class using javascript?

I'm trying to remove a duplicate ID in a li that has a specific class. For example in this list, there are duplicates Ids (small, medium) and I would like to remove the Ids with class "size". How can I do this?

<ul id="bulk">
   <li id="Small" name="size" class="size" value="47">Small</li>
   <li id="Medium" name="size" class="size" value="47">Medium</li>
   <li id="Large" name="size" class="size" value="47">Large</li>
   <li id="X-Large" name="size" class="size" value="47">X-Large</li>
   <li id="Small" name="size" class="active" value="">Small</li>
   <li id="Medium" name="size" class="active" value="">Medium</li>
</ul>

What I want is something like this

<ul id="bulk">
       <li id="Large" name="size" class="size" value="47">Large</li>
       <li id="X-Large" name="size" class="size" value="47">X-Large</li>
       <li id="Small" name="size" class="active" value="">Small</li>
       <li id="Medium" name="size" class="active" value="">Medium</li>
   </ul>

I have tried this code below but it doesn't work

<script>
   uniqueLi = {};
   
   $("#bulk li").each(function () {
     var thisVal = $(this).text();
   
     if ( !(thisVal in uniqueLi) ) {
       uniqueLi[thisVal] = "";
     } else {
       $(this).remove();
     }
   })
      
</script>

Upvotes: 0

Views: 382

Answers (3)

Taplar
Taplar

Reputation: 24965

// make an array of the elements
let bulkItems = [ ...document.querySelectorAll('#bulk .size') ];

for (let i = 0; i < bulkItems.length; i++) {
  // get the id for the item being evaluated
  let thisId = bulkItems[i].id;
  
  // filter out the ones that are duplicates
  bulkItems = bulkItems.filter((it, index) => {
    // if the indexes are the same, it's the same item, include it
    // if the ids are not the same, it's not a duplicate, include it
    if (i === index || it.id !== thisId) return true;
    
    // it's not the same element, and it has the same id
    // remove it from the DOM, and exclude it from the results
    it.parentNode.removeChild(it);
    return false;
  });
}
<ul id="bulk">
   <li id="Small" name="size" class="size" value="47">Small</li>
   <li id="Medium" name="size" class="size" value="47">Medium</li>
   <li id="Large" name="size" class="size" value="47">Large</li>
   <li id="X-Large" name="size" class="size" value="47">X-Large</li>
   <li id="Small" name="size" class="active" value="">Small</li>
   <li id="Medium" name="size" class="active" value="">Medium</li>
</ul>

Upvotes: 1

K Nugal
K Nugal

Reputation: 134

I assume the content is loaded dynamically and once one of those are active you have multiple ids? Anyways foreach is a good start but the uniqueLi makes no sense for me as it is empty. By using hasClass you can check if that li has the class "active" in it.

What you could do is go through all ids and just check for that. I made a snipet for you

$("#bulk li").each(function () {
     if ($(this).hasClass("active") ) {
            $id = $(this).attr("id");
            $("#"+$id+".size").remove();
     }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="bulk">
   <li id="Small" name="size" class="size" value="47">Small</li>
   <li id="Medium" name="size" class="size" value="47">Medium</li>
   <li id="Large" name="size" class="size" value="47">Large</li>
   <li id="X-Large" name="size" class="size" value="47">X-Large</li>
   <li id="Small" name="size" class="active" value="">Small</li>
   <li id="Medium" name="size" class="active" value="">Medium</li>
</ul>

I changed the jquery element. Assuming that the active class causes the multiple id issue, I use the function to find all active classes. By having the ids of those I then delete those that has the same id but with a different class -> "size".

Upvotes: 1

Takilleur
Takilleur

Reputation: 42

Would this work for you?

let small = document.querySelectorAll('#small');
        if (small.length > 1) {
            for (const smalls of small) {
                if (smalls.classList.contains('size')) {
                    smalls.remove();
                }
            }
        }

Upvotes: 0

Related Questions