JQuery, parte 7: Relaciones entre elementos. Métodos: .parent(), .append() y .remove()

A través de la manipulación de elementos del DOM no sólo podemos acceder y manipular valores de las etiquetas haciendo referencia desde su nombre, id o class; también podemos hacerlo desde otro elemento que tenga alguna relación con el mismo.

Por ejemplo nosotros podríamos tener un código html como éste:

<ul id="lista">
    <li id="item1" class="item"> Item 1 </li>
    <li id="item2" class="item"> Item 2 </li>
    <li id="item3" class="item"> Item 3 </li>
</ul>

Y levantar la etiqueta ul, pero a través de una de sus etiquetas hijas, uno de los li. Eso gracias al método parent() que nos permitirá hacer referencia a la etiqueta padre, o etiqueta contenedora del elemento que estamos llamado. Algo como esto:

var padre = $("#item1").parent();

Como vemos en el ejemplo, llamamos a uno de los li por su id y luego recuperamos el elemento que lo contiene, el ul, a través del método parent().

También existe un método en jquery que nos permiten agregar un elemento dentro de otro. El método append() que recibirá un parámetro con la estructura del elemento nuevo. Por ejemplo un ul vacío:

<ul id="lista">
</ul>

Al cual yo le agregaré nuevos elementos de esta forma:

$("#lista").append('<li class="item"> Item 1 </li>');
$("#lista").append('<li class="item"> Item 2 </li>');
$("#lista").append('<li class="item"> Item 3 </li>');

Seguramente habrás notado cierta simulitud entre el método .append() y .html(), pero la diferencia entre ambos es que append() nos permite agregar contenido a una etiqueta sin alterarlo, mientras que html() simplemente cambia el contenido del elemento por el valor nuevo.

Así como existe un método para agregar contenido, también existe otro para eliminar. El método remove() nos permitirá eliminar elementos. Si tuviésemos algo como ésto:

<ul id="lista">
   <li id="item1" class="item"> Item 1 </li>
   <li id="item2" class="item"> Item 2 </li>
   <li id="item3" class="item"> Item 3 </li>
</ul>

Y quisiéramos eliminar uno de los item, podríamos hacerlo de la siguiente forma:

$("#item2").remove();

Hagamos un pequeño ejercicio. Tendremos un input text donde ingresaremos texto y al presionar un botón agregaremos un li dentro de un ul con el texto ingresado. El código html sería así:

<form action="">
   <label> Agregar item </label>
   <input type="text" id="item" />
   <input type="button" id="agregar_item" value="Agregar item" />
 </form>
 <ul id="lista">
 </ul>

Y luego una función:

function agregarItem(){
    var valor_item = $("#item").val();
    $("#item").val('');
    $("#lista").append('<li> ' + valor_item + ' </li>');
}

Que se ejecutará al presionar el botón:

$(document).ready(function(){
    $("#agregar_item").click(function(){
       agregarItem();
    });
});

El código quedaría así:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       function agregarItem(){
          var valor_item = $("#item").val();
          $("#item").val('');
          $("#lista").append('<li> ' + valor_item + ' </li>');
       }
       $(document).ready(function(){
          $("#agregar_item").click(function(){
             agregarItem();
          });
       });
    </script>
 </head>
 <body>
    <form action="">
       <label> Agregar item </label>
       <input type="text" id="item" />
       <input type="button" id="agregar_item" value="Agregar item" />
    </form>
    <ul id="lista">
    </ul>
 </body>
</html>

Ahora bien, supongamos que nosotros no sólo queremos agregar items, sino que una vez agregados los mismos también se puedan eliminar. Para ello primero tendremos que modificar la función agregando links para eliminar el item. Entonces agregarItem() quedaría así:

function agregarItem(){
    var valor_item = $("#item").val();
    $("#item").val('');
    $("#lista").append('<li> ' + valor_item + ' <a class="eliminar_item" href="javascript:void();"> Eliminar </a> </li>');
}

Y ahora, crearemos una función que levante los link por su class «eliminar_item» y les agregaremos un evento click() que al dispararse elimine la etiqueta li padre:

function escuchaEliminarItem(){
    $("#lista").delegate('.eliminar_item', 'click', function(){
       var padre = $(this).parent();
       padre.remove();
    });
}

Si leíste esto último habrás notado el uso de .delegate(), que le aplicamos al elemento ul con id «lista«. El método .delegate() nos permite aplicarle un evento a un determinado conjunto de elementos en este caso los links con nombre de clase «eliminar_item«. También podríamos haber usado el método .each() que aprendimos en el anterior posteo, el problema es que .each() recorre los elemento que existen en ese momento en el navegador, en cambio .delegate() sirve para elementos futuros que se agregan en forma dinámica, en este caso los links para eliminar se agregan dentro de los items al pulsar el botón.

El evento .delegate() recibirá tres parámetros: los elementos hijos llamados por ejemplo por su class; el nombre del evento, en nuestro caso ‘click‘ y finalmente la función anónima que se disparará al escucharse ese evento.

El código entonces quedaría así:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       function agregarItem(){
          var valor_item = $("#item").val();
          $("#item").val('');
          $("#lista").append('<li> ' + valor_item + ' <a class="eliminar_item" href="javascript:void();"> Eliminar </a> </li>');
       }
       function escuchaEliminarItem(){
          $("#lista").delegate('.eliminar_item', 'click', function(){
             var padre = $(this).parent();
             padre.remove();
          });
       }
       $(document).ready(function(){
          $("#agregar_item").click(function(){
             agregarItem();
          });
          escuchaEliminarItem();
       });
    </script>
 </head>
 <body>
    <form action="">
       <label> Agregar item </label>
       <input type="text" id="item" />
       <input type="button" id="agregar_item" value="Agregar item" />
    </form>
    <ul id="lista">
    </ul>
 </body>
</html>

Anterior: JQuery, parte 6: Método .each()

Siguiente: JQuery, parte 8: Relaciones entre elementos. Métodos: .parents(), .find()

6 Replies to “JQuery, parte 7: Relaciones entre elementos. Métodos: .parent(), .append() y .remove()”

muchisimas gracias un excelente aporte me funciono perfecto

Ferchu dice:

1 abril, 2016 a las 1:21

Gracias a vos por escribir, Maykol.

Saludos!

He aprendido en 2 horas lo que no había podido en ocasiones pasadas con otros tutoriales, claro, conciso y al punto, excelentes tutoriales, muchas gracias por compartir, continuo con los demás que tienes. Un saludo.

Ferchu dice:

27 abril, 2016 a las 0:17

Gracias por el comentario, rzc.

Salduso!

Alguien me podría ayudar:
Tengo el siguiente script, funciona la validación, pero si le agrego la última parte que está comentada, salta al mensaje enviado, pero no carga nada, ni valida

$.validator.addMethod(
«regex»,
function(value, element, regexp)
{
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
«Please check your input.»
);

$( document ).ready( function (e) {
$( «#altausuario» ).validate( {

rules: {
strNombreyApellido: {
required: true,
minlength: 10,
regex: /^[a-zA-Z\s]*$/,
},
strDocumento:
{
required: true,
minlength: 8,
number: true,
regex: /^[0-9]{8}$/,
«remote»:
{
url: ‘includes/validar_documento.php’,
type: «post»,
data:
{
strDocumento: function()
{
return $(‘#altausuario :input[name=»strDocumento»]’).val();
}
}
}
},
strDia: {
required: true,
number: true,
minlength: 2,
},
strMes: {
required: true,
number: true,
minlength: 2,
},
strAnio: {
required: true,
number: true,
minlength: 4,
},
intSexo: {
required: true
},
strDireccion: {
required: true,
minlength: 10
},
strTelefono: {
required: true,
minlength: 6,
regex: /^[0-9]{6}$/,
},
strEmail:
{
required: true,
email: true,
«remote»:
{
url: ‘includes/validar_email.php’,
type: «post»,
data:
{
strEmail: function()
{
return $(‘#altausuario :input[name=»strEmail»]’).val();
}
}
}
},
strPassword: {
required: true,
minlength: 8
},
strPassword2: {
required: true,
minlength: 8,
equalTo: «#strPassword»
},
intSocio: {
required: true
},
acceptTerms: «required»
},
messages: {
strNombreyApellido:{
required: «Ingrese su Nombre y Apellido»,
minlength: «El Nombre y Apellido unnúmero menor a 10 digitos»,
regex: «El Nombre y Apellido solo puede contener letras, y espacios en blanco entre palabras»
},
strDocumento: {
required: «Ingrese su N° de Documento»,
minlength: «El Documento solo acepta 8 números»,
remote: «El Número de Documento ya está en uso!»,
regex: «El Documento solo acepta 8 números, sin puntos»
},
strDia: {
required: «Ingrese el día»,
number: «Ingrese Números»,
minlength: «Ej.: 09»
},
strMes: {
required: «Ingrese el mes»,
number: «Ingrese Números»,
minlength: «Ejemplo: 02»
},
strAnio: {
required: «Ingrese el año»,
number: «Ingrese Números»,
minlength: «El año contiene 4 dígitos»
},
intSexo: {
required: «Seleccione una opción»,
},
strDireccion: {
required: «Ingrese su direccion»,
minlength: «La direccion no puede contener un número menor de 10 caracteres»
},
strTelefono: {
required: «Ingrese su número de teléfono»,
minlength: «El Telèfono no puede contener un número menor de 6 dígitos»,
regex: «El Documento solo acepta 6 números»
},
strEmail: {
required:»Ingrese su Email»,
email:»Por favor ingrese un email válido»,
remote: «El Email ya está en uso!»
},
strPassword: {
required: «Ingrese su requerido»,
minlength: «El Password debe contener un mínimo de 8 caracteres»

},
strPassword2: {
required: «Reingrese su Password»,
minlength: «El Password debe contener un mínimo de 8 caracteres»,
equalTo: «El Password y su confirmación no coinciden»
},
intSocio: {
required: «Seleccione una opción»,
},
acceptTerms: «Acepte los Términos y Condiciones»
},

errorElement: «em»,
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( «help-block» );

// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents( «.col-sm-5» ).addClass( «has-feedback» );

if ( element.prop( «type» ) === «checkbox» ) {
error.insertAfter( element.parent( «label» ) );
} else {
error.insertAfter( element );
}

// Add the span element, if doesn’t exists, and apply the icon classes to it.
if ( !element.next( «span» )[ 0 ] ) {
$( «» ).insertAfter( element );
}
},
success: function ( label, element ) {
// Add the span element, if doesn’t exists, and apply the icon classes to it.
if ( !$( element ).next( «span» )[ 0 ] ) {
$( «» ).insertAfter( $( element ) );
}
},

highlight: function ( element, errorClass, validClass ) {
$( element ).parents( «.col-sm-5» ).addClass( «has-error» ).removeClass( «has-success» );
$( element ).next( «span» ).addClass( «glyphicon-remove» ).removeClass( «glyphicon-ok» );
},
unhighlight: function ( element, errorClass, validClass ) {
$( element ).parents( «.col-sm-5» ).addClass( «has-success» ).removeClass( «has-error» );
$( element ).next( «span» ).addClass( «glyphicon-ok» ).removeClass( «glyphicon-remove» );

});

/*
$(‘#enviar’).on(‘click’, function(e) {
$(‘#altausuario’).html(«»);
$(‘#message’).html(«El registro se efectuó correctamente!»)
.append(«Le hemos enviado un email para confirmar su registro.»)
.hide()
.fadeIn(1500, function() {
$(‘#message’).append(«Muchas Gracias»);
});

});*/

Ferchu dice:

26 octubre, 2016 a las 22:15

Podrías explicar un poco más lo que estás necesitando hacer?

Saludos!

Comments are closed.