En este artículo, aprenderemos cómo eliminar todos los Nodes secundarios de todos los párrafos en jQuery. Los Nodes secundarios son las subetiquetas del párrafo. Aquí, nuestra tarea es eliminar todas las subetiquetas de la etiqueta <p> en DOM. Podemos eliminar todos los Nodes secundarios de todos los párrafos en jQuery utilizando un método diferente.
Enfoque 1: En este enfoque, usaremos el método detach() que se usa para eliminar el elemento seleccionado del dom. Escuchamos el evento de clic del botón, luego seleccionamos los elementos secundarios usando el método de niños y eliminamos el Node secundario. Seguimos los siguientes pasos:
- Primero seleccionamos los Nodes secundarios con el método children().
- Después de seleccionar todos los Nodes del párrafo, usamos el método detach().
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<title>
How to remove all child nodes
from all paragraphs?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to remove all child nodes from
all paragraphs in jquery
<br><br>
<b>
This node will be removed by
the detach of jquery
</b>
</p>
<button style="background-color:green;
border: none; color: black">
REMOVE
</button>
<script>
// jQuery for deleting child node
$("button").click(function () {
$("p").children().detach();
});
</script>
</body>
</html>
Producción:
Quitar Node con separar
Enfoque 2: En este Enfoque, usaremos el método remove() que se usa para eliminar todo el elemento del elemento seleccionado que incluye todos los datos y eventos. Aquí, cuando hacemos clic en el botón, jQuery selecciona todos los Nodes secundarios con elementos secundarios y ejecuta la función de eliminación para el elemento seleccionado. Seguimos los siguientes pasos:
- Primero creamos un evento de clic que ejecuta la función.
- Utiliza la función children() en la etiqueta de párrafo que selecciona todo el Node.
- Por último, aplique el método remove() en el Node secundario seleccionado del párrafo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<title>
How to remove all child nodes
from all paragraphs?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to remove all child nodes from
all paragraphs in jquery
<br><br>
<b>
This node will be removed by the
remove method of jquery
</b>
<br>
<i>
For removing we use remove
function of jQuery
</i>
</p>
<button style="background-color:black;
border: none; color: white">
REMOVE
</button>
<script>
// jQuery for deleting child node
$("button").click(function () {
$("p").children().remove();
});
</script>
</body>
</html>
Producción:
Quitar Node con remove
Enfoque 3: en este enfoque, usaremos el método vacío(), que es una función incorporada que se usa para eliminar todo el Node y su contenido para el elemento seleccionado. El método de los niños se utiliza para seleccionar todos los Nodes secundarios del párrafo. Seguimos los siguientes pasos:
- Primero esperamos a que dom se cargue y luego ejecutamos la función.
- La función escucha el evento de clic del botón y luego ejecuta la función.
- La función selecciona todos los Nodes secundarios del párrafo usando la función children() .
- Y los elementos seleccionados son eliminados por la función empty() .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.6.0.js">
</script>
<title>
How to remove all child nodes
from all paragraphs?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to remove all child nodes
from all paragraphs in jquery
<br><br>
<b>
This node will be removed by
the empty method of jquery
</b>
<br>
<b>
<i>
For removing we use Empty
function of jQuery
</i>
</b>
</p>
<button style="background-color:Gray;
border: none; color: black">
REMOVE
</button>
<script>
// jQuery for deleting child node
$(document).ready(function () {
$("button").click(function () {
$("p").children().empty();
});
});
</script>
</body>
</html>
Producción:
Eliminando Node con vacío
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA