Eliminar elementos HTML haciendo clic con jQuery.



jQuery


Para eliminar elementos HTML como divs, párrafos, listas, imágenes entre otros, utilizaremos la función remove() de jQuery.

$('selector').remove();


Donde selector es el elemento html que deseamos eliminar. 

Ejemplo: 


$('div').remove();


En el ejemplo anterior utilizamos la función remove() la cual eliminará el primer div que encuentre al cargar el documento, se debe saber de antemano que $() "es una función (un tipo de acción) que convierte lo que esté en medio de los paréntesis en un objeto de jQuery; es decir, algo con lo que jQuery pueda trabajar." ¿Pero que sucede si quiero eliminarlo cuando haga clic sobre el?

Para ésto haremos uso del evento click de jQuery.

$('Selector').click(function(){
*acción*
    });


Donde Selector es el elemento html en el que se hará clic para que se realice la *acción* que queremos. 

Ejemplo:


$('div').click(function(){
         $(this).remove();
    });


Al hacer clic en el div este mismo (this) se eliminará.

Entonces, si por ejemplo queremos hacer desaparecer o eliminar un div o cualquier elemento html al hacer clic en el sería algo como:


$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});


Utilizamos $(document).ready(function(){}); para tener listo el documento, luego el evento click junto a la función remove() para remover el div al hacer clic en el.

En el siguiente ejemplo hacemos desaparecer un botón utilizando la función remove() y el evento click():

<!DOCTYPE html>
<html>
    <head>
 <style>
 h2 {
    font-family:arial;
}

div{
 display: inline-block;
 height:20px;
 width:150px;
 background-color:#1280F7;
 font-family:arial;
 color:#ffffff;
 border-radius: 5px;
 text-align:center;
 margin-top:2px;
}
 </style>
     <title>Borrar boton</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 </head>
 <body>
  <h2>Haz clic en el boton para eliminarlo</h2>
  <div>Soy un boton</div>
 <script>
$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});
 </script>
 </body>
</html>

Vamos a verlo en acción:



También te podría interesar:
  1. About you objetivo codecademy html y css
  2. HTML - Lista desplegable con enlaces
  3. 60+ Manuales y libros sobre programación para descargar

¡Ayúdanos a seguir creciendo, comparte en tus Redes Sociales!

Siguiente
« Prev Post
Anterior
Next Post »