JavaScript Supprimer l'élément par identifiant
-
Définissez l’attribut
outerHTMLsur une chaîne vide pour supprimer l’élément par identifiant en JavaScript -
Utilisez
removeChild()pour supprimer un élément par identifiant en JavaScript -
Utilisez
remove()pour supprimer l’élément par identifiant en JavaScript
Ce didacticiel explique comment supprimer un élément HTML à l’aide de son identifiant en JavaScript.
Définissez l’attribut outerHTML sur une chaîne vide pour supprimer l’élément par identifiant en JavaScript
Dans cette méthode, nous sélectionnons l’élément et effaçons le contenu HTML en attribuant une chaîne vide.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").outerHTML = "";
</script>
</html>
C’est une méthode simple, mais elle est rarement utilisée en raison des limitations suivantes :
- Il est plus lent de 5 à 10 % en vitesse que
removeChild()et d’autres méthodes ES5 plus récentes commeremove(). - Il n’est pas pris en charge dans les anciennes versions d’Internet Explorer.
Utilisez removeChild() pour supprimer un élément par identifiant en JavaScript
Nous sélectionnons d’abord l’élément à l’aide de son identifiant, puis appelons la fonction removeChild() de son parent dans cette méthode. Cette méthode offre l’avantage de conserver l’arborescence du DOM.
Cela nous oblige à imiter le comportement interne de suppression d’un élément de l’arborescence afin de ne pas supprimer le nœud parent lui-même.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
function remove(id)
{
var element = document.getElementById(id);
return element.parentNode.removeChild(element);
}
remove("removeme");
</script>
</html>
Utilisez remove() pour supprimer l’élément par identifiant en JavaScript
La méthode remove() a été introduite dans le cadre de ES5. Cela nous permet de supprimer l’élément directement sans passer par son parent. Mais contrairement à la méthode removeChild(), elle ne renvoie pas de référence au nœud supprimé.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="app">Hello World!!</h1>
<p id="removeme">Remove Me</p>
</body>
<script>
document.getElementById("removeme").remove();
</script>
</html>
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn