CODEWITHSUNDEEP
javascriptjqueryhtml
Sascha Heim
Sascha Heim

Reputation: 313

How can I remove divs that have more then one same data value with jQuery?

How I can achieve this ?

<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>

Wanted result:

<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>

Upvotes: 2

Views: 51

Answers (6)

guest271314
guest271314

Reputation: 1

You could utilize $.uniqueSort() , $.map() , .outerHTML, .replaceWith()

var elems = $(".chat_timestamp_group");

var filter = $.uniqueSort($.map(elems, function(el) {
         return el.outerHTML}));

elems.replaceWith(function(i) {
  return filter[i] || ""
});
<script src="https://code.jquery.com/jquery-git.js"></script>
<div class="chat_timestamp_group" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group" data-date="14-March-2016">14-March-2016</div>
<div class="chat_timestamp_group" data-date="14-March-2016">14-March-2016</div>

Upvotes: 1

Ray
Ray

Reputation: 21

Try this.

var found = {};
$('.chat_timestamp_group').each(function() {
    var value = $(this).data('date');
    if (found[value])
        $(this).remove();
    else
        found[value] = true;
});

https://jsfiddle.net/gb2hxuLd/

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use .filter()

var res = [];

var elems = $(".chat_timestamp_group").filter(function(i, el) {
  if (res.indexOf($(el).data("date")) === -1) {
    res.push($(el).data("date"));
    return true
  } else {
    return false
  }
});

console.log(elems)
<script src="https://code.jquery.com/jquery-git.js"></script>

<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>

Upvotes: 1

Stephan
Stephan

Reputation: 43013

Here is a small snippet for removeing unwanted divs.

var divDates = [];

$('div.chat_timestamp_group').each(function(i, div) {
  var dataDate = $(div).attr('data-date');
  if (jQuery.inArray(dataDate, divDates) > -1) {
    $(div).remove();
  } else {
    divDates.push(dataDate);
  }
});
div.chat_timestamp_group,
div.chat_timestamp_group0 {
  border: 2px solid #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

BEFORE
<br>
<div class="chat_timestamp_group0" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group0" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group0" data-date="14-March-2016">14-March-2016</div>
<div class="chat_timestamp_group0" data-date="14-March-2016">14-March-2016</div>

<hr>AFTER
<br>
<div class="chat_timestamp_group" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group" data-date="08-March-2016">08-March-2016</div>
<div class="chat_timestamp_group" data-date="14-March-2016">14-March-2016</div>
<div class="chat_timestamp_group" data-date="14-March-2016">14-March-2016</div>

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29249

Just keep dictionary on the side, check for each if the date exist in the dictionary. If so, remove() it. 

var d = {};
$('div').each(function() {
  var elm = $(this),
      date = elm.attr('data-date');
  
  if (date in d) {
    elm.remove();  
  }
  else {
    d[date] = date;  
  }
});
div:before {
    content:attr(data-date);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="08-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>
<div class="chat_timestamp_group" data-date="14-March-2016"></div>

Upvotes: 2

KIMB-technologies
KIMB-technologies

Reputation: 889

With jQuery you can do it this way:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( function () {
    var dates = [];
    $( "div.chat_timestamp_group" ).each( function (k,v) {
        var date = $( this ).attr( 'data-date' );
        if( dates.indexOf(date) !== -1 ){
            $( this ).remove();
        }
        else{
            dates.push( date );
        }
    }); 
});
</script>

Upvotes: 1

Related Questions