Eliminar elementos HTML haciendo clic con jQuery. – programmers – Donate – Auto

Para eliminar elementosHTMLcomo divs, párrafos, listas, imágenes entre otros, utilizaremos la funciónremove()dejQuery.

$('selector').remove();

Dondeselectores el elemento html que deseamos eliminar.

Ejemplo:

$('div').remove();

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

Para ésto haremos uso del eventoclickdejQuery.

$('Selector').click(function(){

*acción*
    });

DondeSelectores 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 eldiveste 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 elevento clickjunto a la funciónremove()para remover eldival hacer clic en el.

En el siguiente ejemplo hacemos desaparecer un botón utilizando la funciónremove()y elevento 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
     titleBorrar boton/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
 /head
 body
  h2Haz clic en el boton para eliminarlo/h2
  divSoy un boton/div
 script
$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});
 /script
 /body
/html

Vamos a verlo en acción: