How to remove duplicates from a javascript array

Question

The following two lines appears in different locations of a page:

Line 1: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>
Line 2: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>

What I am doing currently is taking for each specLink class anchor and adding it to another DIV:

<div class="addSpecialties">
    //add those links in this DIV
</div>

So with the Javascript I have right now the out comes out line this:

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

However, What I would like to display is (just one of them because they are repetetive):

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

How can I modify my code so it only takes one occurrence of .specLink a.

score 2 · Accepted Answer · edited May 23 '17 at 12:31

The question Remove Duplicates from JavaScript Array contains a full list of ways to remove the duplicates from an array. For example, an easy but naïve way is

function removeDuplicateElements(array) {
  return array.filter(function (item, index) {
    return array.indexOf(item) === index;
  });
}

However, it won't work for you. That function won't remove any of your elements.

That's because objects are compared by reference and, even if your elements look like the same, they are in fact different entities. So the code above won't detect any duplicate.

What you want is some kind of "loose" equality between objects. That is not simple in general.

But since you are only dealing with nodes, there is a perfect solution: isEqualNode

function removeDuplicateNodes(array) {
  return array.filter(function (item, index) {
    for(var i=0; i<index; ++i)
      if(item.isEqualNode(array[i]))
        return false;
    return true;
  });
}

See the difference:

var el1 = document.createElement('div'),
    el2 = el1.cloneNode(true);
removeDuplicateElements([el1, el2]); // [el1, el2], because el1 !== el2
removeDuplicateNodes([el1, el2]); // [el1], because el1.isEqualNode(el2)

score 1 · Answer 2 · answered Jan 08 '16 at 19:32

1

If you are familiar with lodash, the uniq function sounds like what you are looking for.

_.uniq([2, 1, 2]);
// → [2, 1]

// isSorted = true
_.uniq([1, 1, 2], true);
// → [1, 2]

https://lodash.com/docs#uniq

answered Jan 08 '16 at 19:32

errata

23,596
2
22
32

score 1 · Answer 3 · answered Jan 08 '16 at 19:57

1

You must return 'true' to keep an element and 'false' to remove an element. Your 'removeDuplicateElements' function returns false, so as it executes, it deletes every element from the array. As @gnerkus suggested, modify your removeDuplicateElements() function to return the following:

return array.indexOf(item) === index;

answered Jan 08 '16 at 19:57

Eric G.

11
2

1

Wow... you modified your question while I was writing my answer. – Eric G. Jan 08 '16 at 20:00
Yeah sorry didn't think most of the stuff was needed. So I trimmed it. – Si8 Jan 08 '16 at 21:24

score 1 · Answer 4 · answered Jan 08 '16 at 21:32

Here is a function witch removes the duplicates a elements from your div

function removeDuplicateLinks() {
    var div                 = document.getElementsByClassName('addSpecialties')[0];
    var specialities        =  div.children;
    var uniqueSpecialities  = [];

    for (var i = 0; i < specialities.length; i++) {
        var elem = specialities[i];

        if (elem.nodeName === 'A') {
            var title = specialities[i].title;

            if (uniqueSpecialities.indexOf(title) === -1) {
                uniqueSpecialities.push(title);
            } else {
                div.removeChild(elem);
                i--;
            }
        }
    }
}

function removeDuplicateLinks() {
  var div = document.getElementsByClassName('addSpecialties')[0];
  var specialities = div.children;
  var uniqueSpecialities = [];

  for (var i = 0; i < specialities.length; i++) {
    var elem = specialities[i];

    if (elem.nodeName === 'A') {
      var title = specialities[i].title;

      if (uniqueSpecialities.indexOf(title) === -1) {
        uniqueSpecialities.push(title);
      } else {
        div.removeChild(elem);
        i--;
      }
    }
  }
}

.addSpecialties a { display: block; }

<button onclick="removeDuplicateLinks()">Remove duplicate links</button>

<div class="addSpecialties">
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part B" href="#">Part B</a>
  <a title="Part A" href="#">Part A</a>
  <a title="Part C" href="#">Part C</a>
  <a title="Part C" href="#">Part C</a>
</div>

score 0 · Answer 5 · answered Jan 08 '16 at 19:46

0

You need to return the result of the filter:

function removeDuplicateElements(array) {
        return array.filter(function (item, index) {
            return array.indexOf(item) === index;
        });
    }

answered Jan 08 '16 at 19:46

gnerkus

11,357
6
47
71

It is removing all the links :/. I will post a fiddle. – Si8 Jan 08 '16 at 19:49

How to remove duplicates from a javascript array

5 Answers5