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>
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure