jQuery tiene una función destinada solo a eliminar los elementos secundarios del interior de otro elemento. El método “empty()” se puede utilizar directamente en el objeto.
Considere el siguiente código HTML.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
Para eliminar todos los párrafos dentro del elemento “myDiv”, simplemente use el siguiente código en jQuery.
1$("#myDiv").empty();
Pero, ¿cómo podemos realizar esta misma operación usando solo JavaScript?
Eliminación de elementos secundarios de un nodo DOM mediante JavaScript
JavaScript permite al programador eliminar elementos de un nodo DOM a través de varias propiedades. Aprendamos cómo hacer esta eliminación usando cada uno de ellos.
innerHTML
Una de estas propiedades es “innerHTML”. Permite reemplazar todo el HTML interno del elemento. Incluyendo ser reemplazado por una cadena vacía, haciendo que el elemento en cuestión esté vacío.
Para eliminar todos los nodos secundarios dentro del elemento “myDiv”, use el siguiente JavaScript.
1document.getElementById("myDiv").innerHTML = "";
A continuación puedes ver un ejemplo completo en HTML. Aquí usamos un botón para eliminar elementos.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
La propiedad “textContent” se puede usar para reemplazar todos los elementos dentro de un nodo con una cadena vacía.
Dependiendo del navegador, el uso de “textContent” puede funcionar mejor que “innerHTML”.
1document.getElementById("myDiv").textContent = "";
Eliminar elementos secundarios usando un bucle (“lastChild”)
En el ejemplo a continuación, usamos el ciclo “while” para verificar si nuestro elemento contiene el primer elemento secundario. Si es verdadero, indica que hay al menos un elemento secundario dentro del elemento principal, por lo que el ciclo elimina el último elemento. Y se repite el proceso.
La eliminación del último elemento con la propiedad “lastChild” generalmente funciona mejor que la eliminación del primer elemento con la propiedad “firstChild”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Eliminar elementos secundarios usando un bucle (“lastElementChild”)
Aquí lograremos el mismo resultado, pero conservando los “no Elementos”, como los nodos de texto “#text” y los comentarios “<!– comments –>”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Otra característica de “lastElementChild” es preservar los nodos secundarios dentro del elemento principal que no son descendientes directos.
Por ejemplo, considere la estructura de los elementos a continuación.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
Al usar “lastElementChild”, se eliminarían el “First node” y el “Second node”. El “Nodo 1” y el “Nodo 2” no se eliminarían.
Eliminar elementos secundarios con el método “remove”
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
La función “remove” se agregó en ES5. Tiene una sintaxis de encadenamiento más simple y directa. Ya cuenta con un excelente soporte en muchos navegadores .
Eliminar elementos con el método “replaceChildren”
También existe la posibilidad de eliminar elementos secundarios de un nodo DOM utilizando la API “replaceChildren”. Este método le permite no solo eliminar elementos de un elemento principal, sino también reemplazarlos con otros elementos en una sola operación.
Para simplemente eliminar los elementos secundarios, llame a la API sin ningún argumento.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
La API “replaceChildren” ya es compatible con los navegadores modernos .