Как проверить, является ли элемент только потомком типа?

Question 1

Я реализую функциональность, где каждый дочерний элемент имеет кнопку, которая удаляет этот элемент из DOM. Когда остался только один такой элемент, мне нужно удалить и его родителя.

Проблема в том, что родительский элемент иногда имеет элементы до и после, поэтому проверка должна учитывать это и, вероятно, должна основываться на типе элемента, который я ищу, а именно на div.

Таким образом, я в основном после div: only-of-type , но версия javascript, не jquery.

Я представляю что-то вроде этого:

if (target.parentNode.onlyOfType()) {
    //do seomthing
}

javascript

0

bewww

Answer

Вы можете проверить длину children parentNode , на основе которого вы можете удалить родительский элемент целевого элемента.

< Сильный > Демо :

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(target){
    if (this.parentNode.children.length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child, can not be deleted');
  })
});

<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
</div>

Если вы хотите проверить тип, вы можете использовать querySelectorAll () следующим образом:

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(){
    var type = this.type;
    if (this.parentNode.querySelectorAll(type).length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child with same type, can not be deleted');
  })
});

<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
  <button type="button" class="myClass">Edit</button>
</div>

Question 2

Вы можете проверить длину children parentNode , на основе которого вы можете удалить родительский элемент целевого элемента.

< Сильный > Демо :

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(target){
    if (this.parentNode.children.length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child, can not be deleted');
  })
});

<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
</div>

Если вы хотите проверить тип, вы можете использовать querySelectorAll () следующим образом:

var btns = document.querySelectorAll('.myClass');
Array.from(btns).forEach(function(b){
  b.addEventListener('click', function(){
    var type = this.type;
    if (this.parentNode.querySelectorAll(type).length == 1) {
      this.parentNode.remove();
    }
    else alert('Has other child with same type, can not be deleted');
  })
});

<div class="">Container 1
  <button type="button" class="myClass">Delete</button>
  <label>Some Other</label>
</div>
<div class="">Container 2
  <button type="button" class="myClass">Delete</button>
</div>
<div class="">Container 3
  <label>Some Other</label>
  <button type="button" class="myClass">Delete</button>
  <button type="button" class="myClass">Edit</button>
</div>

Как проверить, является ли элемент только потомком типа?

1 ответ

Новые вопросы

javascript