Удалить все элементы с классом, который содержит ..._ru | JS

Рейтинг: 0Ответов: 2Опубликовано: 22.01.2023

Есть небольшой одностраничник. Нужно через js удалить все элементы с классом которые содержат ..._ru. Например есть список <ul><li>... именно оттуда нужно отыскать те эл. с классом. Но в дальнейшем понадобиться удалить те элементы, с указанным классом, во всей странице. Лучше уж показать тот пример, который чекает всю страницу и удаляет те классы (все равно стр маленькая, по оптимизации не ударит).

P.S: Пробовал через jquery, а именно функцию .each() и indexOf() отыскать, но индекс элемента некорректный, чтобы достучаться до него.

<ul>
    <li class="service1_en">Washing</li>
    <li class="service2_en">Cleaning</li>
    <li class="service1_ru">Доставка</li>
    <li class="service3_en">Cargo</li>
    <li class="service2_ru">Сервировка</li>
</ul>
javascript классы list delete indexof
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно использовать document.querySelectorAll. Селектор: [class$=_ru] Выбирает все элементы со значением атрибута class, заканчивающимся на «_ru». Можете ознакомится с некоторыми примерами селекторов здесь https://www.w3schools.com/cssref/trysel.php?

document.querySelectorAll("[class$=_ru]").forEach(e => {
  e.remove()
})
<ul>
  <li class="service1_en">Washing</li>
  <li class="service2_en">Cleaning</li>
  <li class="service1_ru">Доставка</li>
  <li class="service3_en">Cargo</li>
  <li class="service2_ru">Сервировка</li>
</ul>

▲ 1

$('li[class*="_ru"]').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul>
    <li class="service1_en">Washing</li>
    <li class="service2_en">Cleaning</li>
    <li class="service1_ru">Доставка</li>
    <li class="service3_en">Cargo</li>
    <li class="service2_ru">Сервировка</li>
</ul>

Использован данные по CSS селекторам, а именно звёздочка

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors