Comment supprimer des nœuds en javascript-js tutoriel-php.cn

Comment supprimer des nœuds en javascript

藏色散人

Libérer： 2023-01-03 09:31:47

original

6090 Les gens l'ont consulté

Comment supprimer un nœud en JavaScript : 1. Utilisez la méthode Remove() pour supprimer tous les éléments du nœud parent, y compris tous les nœuds de texte et enfants. 2. Utilisez la méthode RemoveChild() pour supprimer un enfant ; nœud sur le nœud parent.

Comment supprimer des nœuds en javascript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur DELL G3.

Méthode 1 : utilisez Remove() pour supprimer un nœud

La méthode Remove() peut être utilisée pour supprimer tous les éléments du nœud parent, y compris tout le texte et nœuds enfants.

Exemple : Supprimer tous les nœuds enfants li sur le nœud ul

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head> 
  
<body> 
    <ul style="border: 2px dashed #006DAF;"> 
        <li>Get Up in Morning</li> 
        <li>Do some exercise</li> 
        <li>Get Ready for school</li> 
        <li>Study Daily</li> 
        <li>Do homework</li> 
    </ul> 
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
        var e = document.querySelector("ul"); 
        var first = e.firstElementChild; 
        while (first) { 
            first.remove(); 
            first = e.firstElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

Copier après la connexion

Rendu :

Comment supprimer des nœuds en javascript

Méthode 2 : Utiliser RemoveChild ( )La méthode Supprimer le nœud

removeChild() est utilisée pour supprimer un nœud enfant sur le nœud parent.

Exemple : Supprimer tous les nœuds enfants li sur le nœud ul

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head> 
  
<body> 
    <ul style="border: 2px dashed #D58C00;"> 
        <li>Get Up in Morning</li> 
        <li>Do some exercise</li> 
        <li>Get Ready for school</li> 
        <li>Study Daily</li> 
        <li>Do homework</li> 
    </ul> 
    <input id="btn" type="button" value="删除子节点"> 
</body> 
<script> 
    function deleteChild() { 
        var e = document.querySelector("ul"); 
        var child = e.lastElementChild;  
        while (child) { 
            e.removeChild(child); 
            child = e.lastElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 
</script> 
  
</html>

Copier après la connexion

Rendu :

Comment supprimer des nœuds en javascript