как проверить наличие отличающегося атрибута элемента?

Question

как проверить наличие отличающегося атрибута элемента?

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

Есть див:

<div class="test" data-one="1" data-two="11" data-three="" > </div>

Как определить, есть ли у div атрибут, начинающийся с data-, но отличающийся от атрибутов «data-one» и «data-two» (т.е не заканчивающийся на «one» и «two») и если он есть удалить элемент?

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1

У элементов есть атрибуты вида data-*. Все эти атрибуты лежат в <Element>.dataset и представляют из себя объект.

Что бы удалить атрибут, просто удаляем его, как из обычного объекта:

const div = document.getElementById('tst');
console.log('До', div);
console.log('ДатаСет', div.dataset);
for (let val in div.dataset) {
  if (val !== 'one' && val !== 'two') delete div.dataset[val]
}

console.log('После', div);

<div class="test" id="tst" data-one="1" data-two="11" data-three="222">Удаление лихних атрибутов *data-*</div>

UPD по комментарию

а если необходимо удалить не атрибут, а конкретно этот Div

Для удаления самого DIV используйте метод remove()

const div = document.getElementById('tst');
console.log('До', div);
console.log('ДатаСет', div.dataset);
for (let val in div.dataset) {
  if (val !== 'one' && val !== 'two') div.remove();
}
console.log('После', document.getElementById('tst'));

<div class="test" id="tst" data-one="1" data-two="11" data-three="222">Удаление лихних атрибутов *data-*</div>

UPD по ответу

Если элементов может быть много с нужным классом и нет возможности добавить в нужный элемент уникальный id, то можно воспользоваться следующим скриптом, который выбирает все элементы по имени класса, а далее каждый проверяет на наличие атрибутов data- и если условие выполняется, то удалеяет элемент и останавливает внутренний цикл

const divs = document.querySelectorAll('.test');
divs.forEach(item => {
  for (let val in item.dataset) {
    if (val !== 'one' && val !== 'two') {
      item.remove();
      break; // Нет смысла дальше проверять на удаленном элементе
    }
  }
})

<div class="test2" data-one="1" data-two="11" data-three="">Не тот класс</div>
<div class="test" data-one="1" data-two="11">Нет data-three</div>
<div class="test" data-one="1" data-two="11" data-three="">Будет удалено</div>
<div class="test" data-one="1" data-two="11" data-four="">Тоже удалено</div>

Answer 2

▲ 0

  window.onload = function() {
    var divsToRemove = document.getElementsByClassName("test");
    for (var i = 0; i < divsToRemove.length; i++) {
      for (let val in divsToRemove[i].dataset) {
        if (val !== 'one' && val !== 'two-test') {
          divsToRemove[i].remove();
        }
      }

    }
  };

<div class="test" data-one="1" data-two-test="11" data-three="222">к удалению</div>
<div class="test" data-one="1" data-two-test="11">сохранить</div>
<div class="test" data-one="1" data-two="11" data-three="222">к удалению</div>

как проверить наличие отличающегося атрибута элемента?

Ответы