Удалить последующие повторяющиеся элементы по классу

Question

С помощью javascript или jquery мне нужно удалить повторяющиеся элементы в наборах, чтобы они остались. Они все одинаковые, поэтому не имеет значения, какие удаляются, пока кто-то остается. Страница выглядит следующим образом:

<div class="column-hr"></div>
<div class="column-hr"></div>
<div class="column-dude"></div>
<div class="column-hr"></div>
<div class="column-hr"></div>
<div class="column-dude"></div>
<div class="column-hr"></div>

Один <div class="column-hr"></div> перед каждым <div class="column-dude"></div> должен остаться, но каждый последующий столбец hr перед каждым столбцом чувак должен идти.

Я попробовал следующее, надеясь, что это будет так просто. Не сработало

$( "div.column-hr" ).each(function( index ) {
    if ($(this).next('div.column.hr')) {
        $(this).remove();
    }
});

Answer 1

Вы можете достичь этого с помощью селектора +, Очень простое, а также самое быстрое решение, так как для выбора элементов будет использоваться CSS-движок браузера:

$(".column-hr + .column-hr").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column-hr">hr</div>
<div class="column-hr">hr</div>
<div class="column-dude">dude</div>
<div class="column-hr">hr</div>
<div class="column-hr">hr</div>
<div class="column-dude">dude</div>
<div class="column-hr">hr</div>

Как это работает: CSS селектор .column-hr + .column-hr выбирает .column-hr элементы, которые имеют непосредственный предыдущий брат .column-hr, В результате это выражение выберет все смежные .column-hr элементы, кроме самого первого, потому что у первого нет другого .column-hr прямо перед этим.

Answer 2

var classesToRemove = ['column-hr', 'column-dude'];
var $elements;

for (var i = 0, l = classesToRemove.length; i < l; i++) {
    // Find elements
    $elements = $('.' + classesToRemove[i]);

    var elementsLength = $elements.length;

    // If there is more than one element
    if (elementsLength > 1) {
        // get all elements except the first
        $elements = $elements.slice(1, elementsLength);
        // remove them
        $elements.remove();
    }
}

// prevent memory leaks
$elements = null;

JSFiddle

Answer 3

Вы можете попробовать это:

$( ".column-hr" ).each(function() {
    console.log($(this).html());
    console.log($(this).next().attr('class'));

    if ($(this).next().attr('class') == 'column-hr') {
        $(this).remove();
    }

});

https://jsfiddle.net/aodnw5ns/