如何使用jQuery删除具有多个相同数据值的div？

Question

我怎么能做到这一点？

<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>

通缉结果：

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

Answer 1

只需将字典放在一边，检查字典中是否存在日期。如果是，remove()它。

＆＃13;

＆＃13;

var d = {};
$('div').each(function() {
  var elm = $(this),
      date = elm.attr('data-date');
  
  if (date in d) {
    elm.remove();  
  }
  else {
    d[date] = date;  
  }
});

＆＃13;

div:before {
    content:attr(data-date);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jQuery，你可以这样做：

<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>

Answer 3

这是一个用于删除不需要的div的小片段。

＆＃13;

＆＃13;

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);
  }
});

＆＃13;

div.chat_timestamp_group,
div.chat_timestamp_group0 {
  border: 2px solid #000000;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用.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>

Answer 5

试试这个。

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/

Answer 6

您可以使用$.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>

{{1}}