Dado un documento HTML que contiene elementos div y la tarea es eliminar los elementos HTML existentes usando jQuery. Para eliminar elementos y su contenido, jQuery proporciona dos métodos:
- remove(): Elimina el elemento seleccionado con sus elementos secundarios.
- vacío(): elimina el elemento secundario de los elementos seleccionados.
Ejemplo:
<div id="Parent"> <div id="child1">child 1</div> <div id="child2">child 2</div> <div id="child3">child 3</div> </div>
Sintaxis: La siguiente función borra el padre «div»
$('#parent').empty();
La siguiente función borra todos los «divs» secundarios, pero deja el principal intacto.
$('#parent div').empty()
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div id="parent">
Parent div
<div id="child1">Child 1</div>
<div id="child2">Child 2</div>
<div id="child3">Child 3</div>
</div>
<button onclick=myFunc()>Click me</button>
<Script>
function myFunc() {
$('#parent div').empty()
}
</Script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por rahulrajendrashewale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA