Блог

Главная - Вопросы по программированию - Измените дочерние элементы DIV, чтобы они не отображались

Измените дочерние элементы DIV, чтобы они не отображались

#javascript #styles #display

Вопрос:

HTML

     <div id="divID">
      <label></label>
      <textarea></textarea>
    </div>

язык JavaScript

 function invisible(){
 let div = document.getElementById("divID");
 let children = div.childNodes;
   for (let i = 0; i < children.length; i  ) {
      children[i].style.display = "none";
   }
 }

После вызова функции ничего не происходит. Что я делаю не так?

Ответ №1:

Вы должны установить divID свой div тег.

     <div id="divID">
      <label></label>
      <textarea></textarea>
    </div>

И тогда вы должны использовать div.children в invisible функции.

 function invisible(){
 let div = document.getElementById("divID");
 let children = div.children;
   for (let i = 0; i < children.length; i  ) {
      children[i].style.display = "none";
   }
 }
  
    <input type="button" onClick=" invisible()" value="Remove" />
   <div id="divID">
      <label></label>
      <textarea></textarea>
    </div>

Комментарии:

1. У моего div есть удостоверение личности. Я забыл добавить его в пример. Проблема была не в этом. Я отредактировал пример.

2. Хорошо, что есть и другие вещи div.children . Пожалуйста, запустите мой код и посмотрите результат. Это хорошо работает

3. раздел «дети» не работает. Я использовал div.childNodes, следуя примеру MDN.

4. @cat15ets Я редактирую свой код, чтобы лучше понять. Я добавляю remove button . Пожалуйста, запустите код и нажмите remove button

5. Хорошо, все работает! У меня тоже была опечатка. Главной проблемой были детские узлы. Я заменил childNodes на children, исправил опечатку и все работает. Спасибо!

Ответ №2:

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

 function invisible(parent){
 for(const child of parent.children) child.style.display = 'none';
}
invisible(document.querySelector('div')) 
  <div>
   <label>Label</label>
   <textarea>Textarea</textarea>
</div>

Комментарии:

1. Да, проблема была с детскими узлами. node.children работает, node.childNodes-нет. Я принял приведенный выше ответ, потому что он был первым, но это тоже работает и выглядит хорошо

Ответ №3:

Проблема, по-видимому, в том, что вы используете childNodes вместо children того, чтобы, как указывали другие ответы.

Этот ответ пытается дать больше информации о том, что происходит, в дополнение к другим ответам.

 let div = document.getElementById("divID");

console.log(div.childNodes)
// Returns something like
NodeList(5) [text, label, text, textarea, text]

console.log(div.children)
// Returns something like
HTMLCollection(2) [label, textarea]

Поэтому childNodes возвращает a NodeList и children возвращает an HTMLCollection .

Определение children mdn объясняет разницу между children и childNodes :

Element.children включает в себя только узлы элемента. Чтобы получить все дочерние узлы, включая неэлементные узлы, такие как узлы текста и комментариев, используйте Node.childNodes.

Проблема в том, что у этих text узлов нет style свойства. Поэтому он возвращается undefined . Попытка доступа к display свойству on style вызывает a TypeError . Поскольку первый элемент является text элементом, цикл немедленно завершается, и label и textarea никогда не скрываются.

Ответ №4:

используйте children вместо childNodes :

 function invisible(){
 let div = document.getElementById("divID");
 let children = div.children; //<== children instead of childNodes
   for (let i = 0; i < children.length; i  ) {
      children[i].style.display = "none";
   }
 }
 //just to test after 1.5 sec all children of divID will be removed(display=none)
setTimeout(invisible, 1500) 
 <div id='divID'>
  <label>test1</label>
  <textarea>test2</textarea>
</div>
Метки: ,