Con la funcíon de jQuery empty() podemos vaciar (dejar en blanco) cualquier elemento (div, etiqueta html…) y eliminar sus nodos hijos del DOM de nuestra web.
Esto quiere decir que podemos vaciar los objetos y eliminar el contenido que contengan dentro del mismo (nodos hijos), el contenido y el elemento borrado o vaciado nunca se eliminará físicamente del HTML si no dinámicamente del DOM.
Si todavía no os ha quedado claro el significado del DOM podéis visitar esta URL.
Diferencias entre jQuery empty() y jQuery remove():
Otras funciones parecidas son:
La diferencia es que estas 2 últimas en vez de eliminar el elemento lo ocultan. Tampoco perdamos de vista las funciones addClass() y removeClass() para añadir o eliminar CSS en los elementos del DOM.
Os voy a poner la sintaxis de esta función de jQuery extraída de su web oficial:
$(elemento).empty()
Tal y como esta escrito en la línea superior, solo hace falta pasarle a jQuery empty() el elemento que queremos vaciar y eliminar sus nodos hijos (subnodos), este elemento puede ser:
Y así con casi todos los elementos que podamos tener una web y que podamos acceder a ellos fácilmente mediante su tag, id o clase.
Para terminar este post he realizado este ejemplo de jQuery empty():
<!-- libreria jquery --> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#boton01").click(function(event) { $("p").empty(); }); $("#boton02").click(function(event) { $("#boton02").empty(); }); $("#boton03").click(function(event) { $(".boton03").empty(); }); }); </script>
Explico las líneas superiores:
Con estos 3 ejemplos sabemos como borrar los elementos del DOM de una web referenciándolos por:
Termino poniendo el código de los 3 botones:
<input type="button" name="boton01" id="boton01" value="Eliminar todos los párrafos!!!"> <input type="button" name="boton02" id="boton02" value="Eliminar ids='boton02'"> <input type="button" name="boton03" id="boton03" class="boton03" value="Eliminar clases='boton03'">
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: