Javascript remove all elements in div

Удаление html-элементов в JavaScript

В JavaScript можно создавать элементы с нуля и добавлять их в уже существующую html-разметку (см. статью «Создание html-элементов в JavaScript»). Однако нередко возникает вопрос — а как удалить уже существующие html-элементы? Давайте рассмотрим способы.

Удаление html-элементов методом removeChild()

Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. «удалить ребенка» (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:

Давайте рассмотрим удаление элементов на примере списка:

, а затем удалить дочерний узел с именно этим элементом ( removeChild(this) ). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление методом remove()

По сравнению с removeChild() метод remove() прост и понятен:

Т.е. все, что вам нужно сделать — это обратиться к элементу и вызвать метод remove() . Рассмотрим его также на примере, в котором по клику будут исчезать однотипные html-блоки:

В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.

Исчезающий блок 1

Исчезающий блок 2

Исчезающий блок 3

Исчезающий блок 4

Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox поддержка есть с 23 версии, в Opera — с 15, в Safari — с 7, т.е. примерно с 2012 года. Более полная информация — на сайте caniuse.com:

Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.

Удаление всех элементов внутри родителя

или
с каким-либо id , но удалить все вложенные
. Для этого можно воспользоваться свойством innerHTML или innerText , или же textContent , присвоив в него пустую строку:

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

Переменная node в приведенных примерах — это тот элемент (узел), в котором нужно удалить вложенные (дочерние) элементы.

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

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3
• Элемент списка 4
• Элемент списка 5

Удаление элементов в jQuery

В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

Пример с использованием методов jQuery remove() и empty()

Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое .

Текст 1-го абзаца внутри div#myDiv

Текст 2-го абзаца внутри div#myDiv

Текст 3-го абзаца внутри div#myDiv

Метод jQuery elem.detach()

Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать ul между 2-мя блоками, используя метод detach() для удаления списка из первого элемента и метод appendTo() для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах li нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса different .

Источник

Efficiently Remove All Elements within a Div Using JavaScript

For creating elements and form elements properly, it’s advisable not to take shortcuts. If you need to remove elements, using a specific function may not be straightforward, especially if you don’t know how it’s built. Instead, consider a different solution to avoid cross-browser issues, particularly with IE which ironically invented the function.

How to delete a created element in JavaScript?

function removeElements(elements) < for(var i = 0; i < elements.length; i++)< elements[i].parentNode.removeChild(elements[i]); >> 

removeElements(document.querySelectorAll('#tbhold tr')); 

Whenever I checked the element, I couldn’t spot the newly created one in the source. However, it was visible on Firebug.

Alterations made to the DOM will not modify the HTML source code; only the DOM inspector will display the modifications.

var name = 'Author'+ctr; var cTarget = document.getElementById( name ); alert( cTarget ); // this one return null? Why? I have created >

While using your showTextBox function, you created something that resulted in an increase of ctr to 2 . As a result, you are now searching for Author2 , which is not present. To resolve this issue, include a ctr—; before it, and the problem should be resolved.

Javascript not removing all elements within a div, That’s because you skip items while removing from the live nodelist. When you remove the item at index 0, the item which was at index 1

Deleting all HTML elements inside of div

To clear the contents, simply replace innerHTML with «» .

In case you have no plans to utilize your else block, it would be better to eliminate it entirely. This will prevent any confusion that may arise in your code.

// select div by ID var conditionalOne = document.getElementById("conditional-one"); // Assign PHP strings to JavaScript variables var conditionalOneText = ''; if (conditionalOneText !== "1" || conditionalOneText !== "2") < // You can remove all nested HTML content simply by setting // the innerHTML property of the element to "". conditionalOne.innerHTML = ""; >

Remove all divs from in a parent div

The utilization of innerHTML eliminates real components, albeit there exist certain browser peculiarities (primarily in IE, which ironically created innerHTML initially).

Below is a conventional approach to accomplish the task.

var el = document.getElementById('parent'); while ( el.firstChild ) el.removeChild( el.firstChild ); 

The fastest way seems to be:

document.getElementById('parent').textContent = ''; 

How to delete all Child Elements from a div element using JS, If you need to clear ALL elements, then there is no need to iterate through them. You can just clear the innerHTML of the div like so:

Removing dynamically created elements

Introducing another feature that enables you to eliminate your offspring’s P components.

function removeUpload(id, num) < // Find the parent element var parent = document.getElementById(id); if (parent) < // Find all the child nodes in parent element var children = parent.getElementsByTagName('P'); // If the child exists, remove it // We have to subtract 1 because `getElementsyTagName` returns an array if (children && children[num - 1) < parent.removeNode(children[num - 1]); >> > 

// create an element var p = document.createElement("P"); p.innerHTML = "something"; // append to some other element document.appendChild(p); // delete it p.parentNode.removeChild(p); 

instead, create it in a proper way

var label = document.createElement("LABEL"); label.innerHTML = some_var; 

The same applies to form elements

var form = document.createElement("FORM"); form.method = "post"; form.action = "some-url"; var input = document.createElement("INPUT"); input.type = "text"; input.name = "name"; input.value = ""; var button = document.createElement("INPUT"); button.type = "button"; button.name = "button"; button.value = "Submit"; button.onclick = function()< // do something >; // append all form element to form and add the form to document form.appendChild(input); form.appendChild(button); document.appendChild("form"); // want to delete all of it? form.parentNode.removeChild(form); 

Removing elements in more details

// Removing a specified element when knowing its parent node var d = document.getElementById("top"); var d_nested = document.getElementById("nested"); var throwawayNode = d.removeChild(d_nested); // Removing a specified element without having to specify its parent node var node = document.getElementById("nested"); if (node.parentNode) < node.parentNode.removeChild(node); >// Removing all children from an element var element = document.getElementById("top"); while (element.firstChild)

// append it to DOM document.getElementById(divName).appendChild(newdiv); // delete it / remove it from DOM newdiv.parentNode.removeChild(newdiv); 

Suppose I am utilizing your function to generate an element, but I am unaware of its internal workings. The only thing I am aware of is that your function yields an element and returns the reference, thus I invoke it as follows.

// let's create a P element var first_p = your_function('p'); // I have it now, and I can reach it by reference (first_p) // if I want to delete it, I just call this first_p.parentNode.removeChild(first_p); // remove the n-th p element function remove_p(n) < var p = document.getElementsByTagName("P"); for(i = 0; i < p.length; i++)< if(p[i+1] == n)< p[i].parentNode.removeChild(p[i]); >> > 

function removeUpload(element id) < var myList =ro5.getElementsByTagName('P');//get total number of p elements available // Find the parent element var element = document.getElementById(element id); var tot=myList.length-1;//subtract the one P element without sure one p element remains visible always > 

I successfully implemented the solution by combining the suggestions provided by @rxgx and @hex494D49 along with the reference to the link on dynamically adding/deleting elements. It took me some time, but the final result is functional.

Источник