jueves, 14 de febrero de 2013

Eliminar elementos desde jQuery

Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:

  • remove(): Elimina los subnodos y el nodo contenedor.
  • empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Remove</title>
<style>
.autor{
    text-align:right;
    font-style:italic;
}
.caja{
    width:300px;
    background-color:#FF9;
    border-color:black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#borraPoema").click(onBorraPoema);
    $("#borraAutor").click(onBorraAutor);
    $("#vaciaPoema").click(onVaciaPoema);
}
function onBorraPoema(){
    $("div").remove();
}
function onBorraAutor(){
    $("p").remove(".autor");
}
function onVaciaPoema(){
    $("div").empty();
}
</script>
</head>
<body>
<div class="caja">
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p class="autor">Autor anónimo</p>
</div>
<input type="button" value="Borra poema" id="borraPoema"/>
<input type="button" value="Borra autor" id="borraAutor"/>
<input type="button" value="Vacia poema" id="vaciaPoema"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Remove.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/

No hay comentarios:

Publicar un comentario