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 »

1 comentarios:

Click here for comentarios
Unknown
admin
27 de mayo de 2017, 16:56 ×

oye tengo un ligero problema cuando pege ese codigo me funciono y todo eso pero luego me di cuenta que al hacer click en todos los div de mi pagina se borravan que ago?

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar