EN
JavaScript - remove all child elements
15
points
In this article, we would like to count different ways how to remove all child elements using JavaScript.
Quick solutions:
const element = document.querySelector('#element');
while(element.lastChild) {
element.removeChild(element.lastChild);
}
or:
const element = document.querySelector('#element');
element.innerHTML = '';
Note: This solution is not recommended.
or:
$('#element').empty(); // with jQuery
Explanation
DOM is composed with nodes that have different types. Element is one kind of node type that is able to contain different nodes inside. It is important to split problem of removing content for nodes removing and elements removing. More often it is necessary to remove all nodes. In this post different ways how to remove content starting from nodes removing are described (1-7 points).
1. removeChild() method examples
To use this approach it is necessary to have parent element that can be taken with parentNode property. To remove element removeChild() or remove() methods are useful. Second one is not supported by older browsers.
1.1. lastChild property
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function emptyElement(element) {
var child = element.lastChild;
while(child) {
element.removeChild(child); // or just: child.remove()
child = element.lastChild;
}
}
var element = document.querySelector('#element');
function onClick() {
emptyElement(element);
}
</script>
</body>
</html>
1.2. firstNode propert
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function emptyElement(element) {
var child = element.firstChild;
while(child) {
element.removeChild(child); // or just: child.remove()
child = element.firstChild;
}
}
var element = document.querySelector('#element');
function onClick() {
emptyElement(element);
}
</script>
</body>
</html>
1.3. childNodes property
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function emptyElement(element) {
var children = element.childNodes;
while(children.length > 0) {
var child = children[children.length - 1]; // children[0];
element.removeChild(child); // or just: child.remove()
}
}
var element = document.querySelector('#element');
function onClick() {
emptyElement(element);
}
</script>
</body>
</html>
3. innerHTML property example
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
var element = document.querySelector('#element');
function onClick() {
element.innerHTML = '';
}
</script>
</body>
</html>
4. innerText property example
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
var element = document.querySelector('#element');
function onClick() {
element.innerText = '';
}
</script>
</body>
</html>
5. textContent propert example
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
var element = document.querySelector('#element');
function onClick() {
element.textContent = '';
}
</script>
</body>
</html>
6. jQuery examples
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function onClick() {
var element = $('#element'); // this method should be executed when DOM is ready
element.empty(); // or element.html('') or element.text('');
}
</script>
</body>
</html>
7. Deleting selected range example
This approach removes all nodes.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function emptyElement(element) {
var range = new Range();
range.selectNodeContents(element);
range.deleteContents();
}
var element = document.querySelector('#element');
function onClick() {
emptyElement(element);
}
</script>
</body>
</html>
8. children property example
Importan note: this approach removes only elements placed directly in the div#element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<button onclick="onClick()">Remove lines!</button>
<script>
function removeElements(element) {
var children = element.children;
while(children.length > 0) {
var child = children[children.length - 1]; // children[0];
element.removeChild(child); // or just: child.remove()
}
}
var element = document.querySelector('#element');
function onClick() {
removeElements(element);
// this line shows the element is not empty still
console.log(element.outerHTML);
}
</script>
</body>
</html>
Hints
It is possible to check if element is empty with hasChildNodes() method.
Alternative titles
- JavaScript - remove all nodes from DOM node
- JavaScript - empty DOM element
- JavaScript - clear HTML node
- JavaScript - clear HTML element (container element)
- JavaScript - clear element (container element)
- JavaScript - empty element (container element)
- JavaScript - empty HTML node
- JavaScript - empty DOM node
- JavaScript - clean HTML node
- JavaScript - clean HTML element (container element)
- JavaScript - clean element (container element)
- JavaScript - remove all children elements of HTML element