CODEWITHSUNDEEP
javascriptjquery
Techin
Techin

Reputation: 7

How to remove duplicate attr href but keep the first by javascript or jQuery

How to remove duplicate attr href but keep the first by Javascript or jQuery?

Below is the default code. And a.class and id can not change.

<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
</div>

I need to this:

<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  Text1
  <a href="test-2" class="link">Text2</a>
  Text2
  <a href="test-3" class="link">Text3</a> 
  Text3
  Text3
</div>

Upvotes: 0

Views: 419

Answers (3)

Ngoan Tran
Ngoan Tran

Reputation: 1527

You can try with below javascript:

var hrefTags = document.getElementsByTagName('A');
var arrValue = [];
for (var i=0; i<hrefTags.length; i++){
  if(arrValue.indexOf(hrefTags[i].innerHTML)>-1){
    hrefTags[i].outerHTML = hrefTags[i].outerHTML.replace(/a/g, 'span');
    i--;
  } else {
    arrValue.push(hrefTags[i].innerHTML);
  }
}
<div class="test-class">
  <a href="test-0" class="link">Text0</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-1" class="link">Text1</a> 
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
  <a href="test-3" class="link">Text3</a> 
</div>

Upvotes: 0

Taufik Nur Rahmanda
Taufik Nur Rahmanda

Reputation: 1969

Sorry for late response, but this is my answer: :D

$(window).on('load',function() {
    var last_elm = $('a[href]:first').text();
    $('a[href]').each(function(i) {
        var content = $(this).text();
        if (i && content==last_elm) $(this).replaceWith('<span>'+content+'</span>');
        last_elm=content;
    });
});

Upvotes: 0

Ken H.
Ken H.

Reputation: 408

Something like this would do approximately what you are looking for:

let tracker = {}; // track href values

$('a').each(function(anc) {
  var href = $(this).attr('href');
  if (tracker.hasOwnProperty(href)) {
    $(this).replaceWith(`<div>${$(this).text()}</div>`);
  } else {
    tracker[href] = true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-class">
  <a href="test-0" class="link">Text0</a>
  <a href="test-1" class="link">Text1</a>
  <a href="test-1" class="link">Text1</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-2" class="link">Text2</a>
  <a href="test-3" class="link">Text3</a>
  <a href="test-3" class="link">Text3</a>
  <a href="test-3" class="link">Text3</a>
</div>

Upvotes: 1

Related Questions