Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Remove any text not inside element tag on a web page with JavaScript?
To remove text nodes that are not inside HTML element tags, we use jQuery's contents() and filter() methods to identify text nodes, then remove() to delete them.
Understanding Text Nodes vs Element Nodes
In the DOM, there are different node types:
-
Element nodes (nodeType = 1): HTML tags like
<div>,<h1> - Text nodes (nodeType = 3): Plain text content not wrapped in tags
Example HTML Structure
Consider this HTML where we want to remove the unwrapped text:
<div><h1>Demo Program</h1></div> This is also Demo Program
The text "This is also Demo Program" is a text node that should be removed since it's not inside any element tag.
Solution Using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Text Nodes Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div><h1>Demo Program</h1></div>
This is also Demo Program
<p>This text is inside a paragraph tag</p>
Another unwrapped text node
<script>
// Remove all text nodes that are direct children of body
$('body').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).remove();
console.log("Text nodes removed successfully");
</script>
</body>
</html>
How It Works
-
$('body').contents()- Gets all child nodes of the body (elements and text nodes) -
filter(function(){})- Filters nodes based on a condition -
this.nodeType === 3- Checks if the node is a text node -
this.nodeValue.trim() !== ''- Ensures we don't remove empty whitespace -
remove()- Removes the filtered text nodes from the DOM
Alternative: Targeting Specific Containers
To remove text nodes from a specific container instead of the entire body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Text Nodes from Specific Container</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<h2>Title Inside Container</h2>
Unwrapped text in container
<p>Paragraph text</p>
More unwrapped text
</div>
<script>
// Remove text nodes only from the specific container
$('#container').contents().filter(function(){
return this.nodeType === 3 && this.nodeValue.trim() !== '';
}).remove();
console.log("Text nodes removed from container");
</script>
</body>
</html>
Output
After running the script, only the content inside HTML element tags will remain. The unwrapped text nodes will be completely removed from the DOM.
Conclusion
Use jQuery's contents().filter() method to identify text nodes (nodeType === 3) and remove() to delete them. This technique effectively cleans up unwrapped text content while preserving properly structured HTML elements.
2K+ Views
