How to remove all text nodes inside parent tag?

M

Max2020-02-07 22:03:55

JavaScript

Max, 2020-02-07 22:03:55

Hello! I'm trying to remove all text nodes from an element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="general.css">
    <title>Document</title>
</head>
<body>
    <div class="wrp">
        <div class="container">
            <h1>Hello</h1>
            <input type="text">
            <input type="text">
            <label for=""><input type="checkbox" onclick="window.event.returnValue=false">Caps Lock</label>
            <button>Hello!</button>
            <div><p>WRLD!</p><p>HI</p></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

"use strict"    
let elem = document.querySelector(".container");
console.log(elem);
function deleteTextNode(parent){

    for( let i = 0; i < parent.children.length; i++){
        if (parent.children[i].firstElementChild){
            deleteTextNode(parent.children[i]);
        }else{
            parent.children[i].textContent = "";
        }
        console.log(parent.children[i]);
    }
}
deleteTextNode(elem);

But it does not work when the tag contains both tags and just text. Can't figure out how to implement it

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

I

Ilya Muromtsev, 2020-02-07
@sfrancisco

Well, you just delete the text inside the elements, the elements themselves remain

M

Max, 2020-02-07
@max10110

I tried to do it in another way (if anyone is interested)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="general.css">
    <title>Document</title>
</head>
<body>
    <div class="wrp">
        <div class="container">
            <h1>Hello</h1>
            <input type="text">
            <input type="text">
            <label for=""><input type="checkbox" onclick="window.event.returnValue=false">Caps Lock</label>
            <button>Hello!</button>
            <div><p>WRLD!</p><p>HI</p></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

"use strict"
let elem = document.querySelector(".container");
console.log(elem);
function remove(parent){
    let child = parent.childNodes;
    for(let i = 0; i < child.length; i++){
        if(child[i].nodeType == 3){
            parent.removeChild(child[i]);
            i--;
        }else{
            remove(child[i]);
        }
    }
}
remove(elem);