КАК УДАЛИТЬ ЧЕРЕЗ JS ВСЕ ЧТО В КОНТЕЙНЕРЕ DIV

Автор На чтение 11 мин Просмотров 10 Опубликовано

Есть такой контейнер + внизу кнопка

 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>
<button>Очистить контейнер!</button>

как удалить все, что есть в контейнере с помощью JavaScript
?!

Мне намекнули что-то про .setHTML
— но я не понял что это.

P. S. Т ОЛЬКО БЕЗ:

var deleteElement = document.getElementById("container");

Air's user avatar

6 золотых знаков
70 бронзовых знаков

задан 6 окт 2020 в 13:51

eldgammel's user avatar

Tогда используйте innerHTML 

 function deleteItems() { const deleteElement = document.querySelector("#container"); deleteElement.innerHTML = '';
} 
 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>
<button onclick="deleteItems()" >Очисть контейнер!</button>

Nikita's user avatar

ответ дан 6 окт 2020 в 13:57

Aziz Umarov's user avatar

Aziz Umarov

2 золотых знака
10 серебряных знаков
33 бронзовых знака 

 function deleteItems() { var deleteElement = container.querySelectorAll('div'); for (let i = 0; i < deleteElement.length; i++) { deleteElement[i].remove(); }
} 
 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>
<button onclick="deleteItems()">Очисть контейнер!</button>

ответ дан 6 окт 2020 в 14:37

Air's user avatar

6 золотых знаков
70 бронзовых знаков

How can I remove the content of a div tag using JavaScript?

I have tried some code, but it only removes the level1
div (and of course all o it childern), but how can I remove only the content in level3
inside?

 function destroyDiv() { var div = document.getElementById("level1"); div.parentNode.removeChild(div);
} 
 <div id="level1"> <div id="level2"> <div id="level3"> <label> Test content </label> </div> </div </div> <div id=blahDiv>Remove me</div> <input type=button value='Remove the div' onclick='destroyDiv()'>

double-beep's user avatar

17 gold badges
33 silver badges
41 bronze badges

asked May 6, 2011 at 8:49

holian's user avatar

This sould work document.getElementById("level3").innerHTML = '';
but try thinking about using jQuery, because .innerHTML
implementation differs in some browsers. j Query would look like $('#level3').html('');

answered May 6, 2011 at 8:53

DanielB's user avatar

2 gold badges
44 silver badges
50 bronze badges

Why don’t you access directly level3
?

  document.getElementById("level3").innerHTML = "";

kapa's user avatar

21 gold badges
158 silver badges
175 bronze badges

answered May 6, 2011 at 8:53

Çağdaş's user avatar

1 gold badge
12 silver badges
33 bronze badges

You can use:

 document.getElementById("level3").innerHTML = "";

answered May 6, 2011 at 8:53

Billy's user avatar

28 gold badges
70 silver badges
101 bronze badges

How about this?

 var div = document.getElementById("level3");
div.innerHTML = "";

answered May 6, 2011 at 8:53

Harry Joy's user avatar

Harry Joy

30 gold badges
162 silver badges
207 bronze badges 

 (() => { 'use strict'; let needle = 'level3'; if ( needle === '' || needle === '{{1}}' ) { needle = '.?'; } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) { needle = needle.slice(1,-1); } else { needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\
 (() => { 'use strict'; let needle = 'level3'; if ( needle === '' || needle === '{{1}}' ) { needle = '.?'; } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) { needle = needle.slice(1,-1); } else { needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\(() => { 'use strict'; let needle = 'level3'; if ( needle === '' || needle === '{{1}}' ) { needle = '.?'; } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) { needle = needle.slice(1,-1); } else { needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\((() => { 'use strict'; let needle = 'level3'; if ( needle === '' || needle === '{{1}}' ) { needle = '.?'; } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) { needle = needle.slice(1,-1); } else { needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\
9amp;'); } needle = new RegExp(needle); const divnode = ev => { if (ev) { window.removeEventListener(ev.type, divnode, true); } try { const divs = document.querySelectorAll('div'); for (const div of divs) { if (div.outerHTML.match(needle)) { div.remove(); } } } catch(ex) { } }; if (document.readyState === 'loading') { window.addEventListener('DOMContentLoaded', divnode, true); } else { divnode(); }
})();)amp;'); } needle = new RegExp(needle); const divnode = ev => { if (ev) { window.removeEventListener(ev.type, divnode, true); } try { const divs = document.querySelectorAll('div'); for (const div of divs) { if (div.outerHTML.match(needle)) { div.remove(); } } } catch(ex) { } }; if (document.readyState === 'loading') { window.addEventListener('DOMContentLoaded', divnode, true); } else { divnode(); }
})();amp;'); } needle = new RegExp(needle); const divnode = ev => { if (ev) { window.removeEventListener(ev.type, divnode, true); } try { const divs = document.querySelectorAll('div'); for (const div of divs) { if (div.outerHTML.match(needle)) { div.remove(); } } } catch(ex) { } }; if (document.readyState === 'loading') { window.addEventListener('DOMContentLoaded', divnode, true); } else { divnode(); }
})(); 
amp;');
 }
 needle = new RegExp(needle);
 const divnode = ev => {
 if (ev) { window.removeEventListener(ev.type, divnode, true); }
 try {
 const divs = document.querySelectorAll('div');
 for (const div of divs) {
 if (div.outerHTML.match(needle)) {
 div.remove();
 }
 }
 } catch(ex) {
 }
 };
 if (document.readyState === 'loading') {
 window.addEventListener('DOMContentLoaded', divnode, true);
 } else {
 divnode();
 }
 })();
 
 There you go. A dedicated div-remover with RegEx support.
 answered  Sep 1, 2019 at 8:15 
 You have to just use document  getElementById 
 and set the element to  empty 
 . If your div looks like this:
 <div id="MyDiv">content in here</div>
 Then this  Javascript 
 :
 document.getElementById("MyDiv").innerHTML = "";
 will make it look like this:
 $('div').html(''); 
 $('div').empty(); 
 Simple example code Add this function somewhere on your page (preferably in the <head>
 ). Затем добавьте кнопку при нажатии:
 <!DOCTYPE html>
<html>
<body> <div id="MyDiv">Content in here</div> <button onclick="clearBox('MyDiv')"> Clear </button> <script> function clearBox(elementID) { document.getElementById(elementID).innerHTML = ""; } </script>
</body>
</html> 
 Удаление всех дочерних элементов узла DOM в JavaScript
  •  Этот подход прост, но может не подходить для высокопроизводительных приложений, поскольку он вызывает анализатор HTML браузера (хотя браузеры  могут 
     оптимизировать для случая, когда значение представляет собой пустую строку).
 doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.innerHTML = '';
} 
 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button> 
  •  То же, что и выше, но используйте .textContent
     .  По данным МДН 
     это будет быстрее, чем innerHTML
     поскольку браузеры не будут вызывать свои анализаторы HTML и вместо этого немедленно заменят всех дочерних элементов элемента одним #text
     узел.
 doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.textContent = '';
} 
 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button> 
  Цикл для удаления каждого lastChild
 : 
  •  Использована более ранняя редакция этого ответа firstChild
     , но это обновлено для использования lastChild
     как и в информатике,  в целом 
     , значительно быстрее удалить  последний 
     элемент коллекции, чем удалить первый элемент (в зависимости от того, как реализована коллекция).
  •  Цикл продолжает проверять наличие firstChild
      на всякий случай 
     быстрее проверить firstChild
     чем lastChild
     (например, если список элементов реализован UA как направленный связанный список).
 doFoo.onclick = () => { const myNode = document.getElementById("foo"); while (myNode.firstChild) { myNode.removeChild(myNode.lastChild); }
} 
 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button> 
  Цикл для удаления каждого lastElementChild
 : 
  •  Этот подход сохраняет все не- Element
     (а именно #text
     узлы и <!-- comments -->
     ) дочерние элементы родителя (но не их потомки) – и это может быть желательно в вашем приложении (например, в некоторых системах шаблонов, которые используют встроенные комментарии HTML для хранения инструкций шаблона).
  •  Этот подход не использовался до последних лет, поскольку в Internet Explorer была добавлена ​​только поддержка lastElementChild.
     в IE9.
 doFoo.onclick = () => { const myNode = document.getElementById("foo"); while (myNode.lastElementChild) { myNode.removeChild(myNode.lastElementChild); }
} 
 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <!-- This comment won't be removed --> <span>Hello <!-- This comment WILL be removed --></span> <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button> 
 Оставьте комментарий, если у вас есть какие-либо сомнения или предложения по этому JS-тегу  HTML div 
 тема.
  Примечание: 
   Все коды примеров JS  
  проверяются в браузерах Firefox и Chrome.
 Код: Версия HTML 5
Содержание
  1. # Удалить все элементы определенного класса с помощью JavaScript
  2. # Очистка содержимого элемента Div с помощью JavaScript
  3. # getElementsByClassName vs querySelectorAll
  4. # Очистка элемента DOM с помощью textContent
  5. # Удалить все элементы определенного класса, не удаляя их дочерних элементов
  6. # Очистка содержимого Div по нажатию кнопки
 # Удалить все элементы определенного класса с помощью JavaScript
  Чтобы удалить все элементы определенного класса: 
  1.  Используйте document.querySelectorAll()
     метод для выбора элементов по классу.
  2.  Используйте forEach()
     метод для перебора коллекции.
  3.  Позвоните remove()
     метод для каждого элемента, чтобы удалить его из DOM.
 Вот HTML-код примеров.
    bobbyhadz.com Box 1 Box 2 Box 3   
 А вот соответствующий код JavaScript.
  boxes
boxes box 
 remove all elements with specific class
 Мы использовали  document.querySelectorAll 
метод для выбора всех элементов класса box
 в ДОМ.
 querySelectorAll
 метод возвращает NodeList
 , поэтому мы можем использовать
  NodeList.forEach 
метод для перебора коллекции элементов.
 # Очистка содержимого элемента Div с помощью JavaScript
  Используйте replaceChildren()
 метод очистки содержимого div
 элемент,
 например div.replaceChildren()
 . 
  Когда replaceChildren
 метод вызывается без передачи ему каких-либо аргументов,
 метод очищает элемент от всех его дочерних элементов. 
 Вот HTML-код примеров.
 bobbyhadz.com
  
 Яблоко
 Груша
 Банан
  
 А вот соответствующий код JavaScript.
  container
container 
 clear content of div element
 Мы позвонили в
  replaceДети 
метод без передачи ему каких-либо параметров, что очистило содержимое
 div
 элемент.
  Этот метод также можно использовать для замены существующих дочерних элементов элемента предоставленным набором дочерних элементов. 
  container p1
p1  Apple p2
p2  Orangecontainerp1 p2// ✅ If you have a collection of elements 
 replace existing children of element with provided set of children
 Используя replaceChildren
 метод, мы можем очистить содержимое div
и добавьте к нему новый набор дочерних элементов за один шаг, что немного быстрее.
  Метод требует одного или нескольких Node
 объекты или строки, которыми он заменяет существующие дочерние элементы элемента. 
 # getElementsByClassName vs querySelectorAll
 Если вы используете
  document.getElementsByClassName 
метод, вам необходимо преобразовать результат в массив перед вызовом метода
 forEach()
 метод.
  boxes
boxes box 
 Обратите внимание, что querySelectorAll
 Метод принимает селектор в качестве параметра. В
 при вызове метода мы поставили перед именем класса точку .box
 .
  boxes
boxes box 
 Тогда как getElementsByClassName
 Метод принимает имя класса в качестве параметра.
 Функция, которую мы передали в forEach()
 метод вызывается с каждым элементом
 в коллекции.
 На каждой итерации мы использовали
  Элемент.remove() 
метод для удаления элемента из DOM.
  Обратите внимание, что удаление элемента DOM также удаляет все его дочерние элементы. 
 # Очистка элемента DOM с помощью textContent
 Альтернативно вы можете установить элемент textContent
 недвижимость в пустую
 нить.
 Настройка textContent
 на элементе удаляет все его дочерние элементы и заменяет
 их с помощью одного текстового узла с указанным значением.
  container
container  
 Текст Содержимое 
 имущество может быть
 используется для чтения и установки текстового содержимого элемента.
 При использовании свойства для установки текстового содержимого узла все элементы элемента
 дочерние элементы удаляются и заменяются предоставленным строковым значением.
  В приведенном выше примере мы фактически заменяем всех дочерних элементов элемента div пустой строкой. 
 Вы также можете увидеть innerHTML
 имущество, используемое аналогичным образом.
  container
container  
 Это дает тот же результат, однако это может быть медленнее, поскольку установка
 innerHTML
 Свойство использует парсер HTML браузера.
 textContent
 Свойство не использует анализатор HTML браузера и может быть
 быстрее, если у элемента много дочерних элементов.
 Какой подход вы выберете, зависит от ваших личных предпочтений. я бы пошел с
 replaceChildren
 метод, поскольку он является прямым, легко читаемым и может быть использован для
 заменить удаленные дочерние элементы за один шаг.
 # Удалить все элементы определенного класса, не удаляя их дочерних элементов
 Если вам нужно удалить элементы с определенным именем класса, не удаляя
 их дети, используйте replaceWith()
 метод.
  
 Ребенок 1
 Ребенок 2
 Ребенок 3
  
 А вот соответствующий код JavaScript.
  boxes
boxes boxbox 
 remove elements with class without removing children
 Чтобы удалить элемент, не удаляя его дочерних элементов, нам пришлось заменить
 элемент со своими дочерними элементами.
  дочерние узлы 
 свойство возвращает
 NodeList
 содержащий дочерние элементы, текст и комментарии.
 # Очистка содержимого Div по нажатию кнопки
 Вот пример, который очищает содержимое элемента div при нажатии кнопки.
 bobbyhadz.com
  
 Яблоко
 Груша
 Банан
 Очистить содержимое div
  
 А вот соответствующий код JavaScript.
  container btn
btn container 
 clear div contents on button click
 Мы добавили click
 прослушиватель событий элемента кнопки.
 При каждом нажатии кнопки handleClick
 вызывается функция, где
 мы просто вызываем replaceChildren
 метод.
Про ГИС ЖКХ:  ГОРЯЧАЯ ЛИНИЯ ПО ГОСУСЛУГАМ В САНКТ ПЕТЕРБУРГЕ
Оцените статью
ГИС ЖКХ
© 2025 ГИС ЖКХ