如何使用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()它。

 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> 

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的小片段。

 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> 

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

你可以利用$.uniqueSort() ， $.map() 。 .outerHTML $.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>