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

Question 1

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

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

Так что я в основном ищу div:only-of-type, но версию javascript, а не jquery.

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

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

javascript

0

bewww 28 Окт 2019 в 16:48

1

Почему бы не document.querySelectorAll('div').length === 1?

–

Daniel A. White

28 Окт 2019 в 16:49

Это действительно было так просто! Я нахожусь на ранней стадии изучения js, поэтому мое воображение для решений весьма ограничено. Спасибо за чаевые.

–

bewww

28 Окт 2019 в 17:14

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>

1

Mamun 28 Окт 2019 в 17:17

Оба они работают. И теперь я знаю, что ParentNode.children, похоже, игнорирует элементы до/после. Спасибо.

–

bewww

28 Окт 2019 в 17:22

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

Mamun 28 Окт 2019 в 17:17

Оба они работают. И теперь я знаю, что ParentNode.children, похоже, игнорирует элементы до/после. Спасибо.

–

bewww

28 Окт 2019 в 17:22

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

1 ответ

Похожие вопросы

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

javascript