Есть множество
<div class="block">
<span>значение</span>
</div>
Как можно с помощью js или jquery удалить все div'ы с этим классом,если значения совпадают,т.е оставить только самый первый.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть множество
<div class="block">
<span>значение</span>
</div>
Как можно с помощью js или jquery удалить все div'ы с этим классом,если значения совпадают,т.е оставить только самый первый.
let obj = {};
$('.block').each(function() {
if (obj[$(this).children().text()]) {
$(this).remove();
} else {
obj[$(this).children().text()] = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<span>значение</span>
</div>
<div class="block">
<span>значение</span>
</div>
<div class="block">
<span>значение1</span>
</div>
<div class="block">
<span>значение1</span>
</div>
<div class="block">
<span>значение1</span>
</div>
Ответ-дополнение, о том как решить данную задачу на чистом JavaScript.
Эквивалент кода в принятом ответе:
let obj = {};
for (let el of document.querySelectorAll('.block')) {
if (typeof obj[el.textContent] !== 'undefined')
el.remove();
else
obj[el.textContent] = true;
}
Сравнение типа с undefined
необходимо и в решении на jQuery - иначе, элементы с пустыми значениями (<span></span>
) будут пропускаться.
Более гибкое решение (и без лишнего буферного объекта):
// ref - селектор "образца", elements (опционально) - селектор элементов для поиска
function removeDuplicates(ref, elements = ref) {
let count = 0;
if (ref = document.querySelector(ref)) {
const txt = ref.textContent.trim().toLowerCase();
for (let el of document.querySelectorAll(elements)) {
if (el !== ref && el.textContent.trim().toLowerCase() === txt)
el.remove(), count++;
}
}
return count;
}
const n = removeDuplicates('#reference .block', '.block');
console.log('Удалено элементов: ' + n);
<div class="block">
<span>значение</span>
</div>
<section id="reference">
<div class="block">
<span>значение</span>
</div>
</section>
<div class="block">
<span>значение</span>
</div>
<div class="block">
<span>не значение</span>
</div>
<div class="block">
<span>Значение</span>
</div>
['.block1', '.block2'].forEach(s => removeDuplicates(s);
или for (s of ['.block1', '.block2']) removeDuplicates(s);
.