Tema: jQuery detectar atributo de un elemento
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 20/12/2010, 07:20
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años, 2 meses
Puntos: 65
Respuesta: jQuery detectar atributo de un elemento
no hace falta índices para saber dónde haces click o cómo ubicar elementos, tenés que manejarte con el elemento contenedor porque lo que querés hacer es copiar una estructura para duplicarlo y para los eventos también

Fijate que sencillo, primero me obtengo todo el html que está en #telefonos porque eso es lo que quiero duplicar, cuando hago click en clase #anadir-campo borro el id, le agrego la clase .eliminar-campo y le cambio el texto, luego agrego el html con todos los campos que seria la nueva fila al contenedor #telefonos.

Para eliminar solo me muevo desde el elemento que hicieron click hasta el elemento contenedor que le indico a closest y lo borro, en este caso es el div .clonar que seria la fila.

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>Ejemplo</title>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5.     </head>
  6.         <script type="text/javascript">
  7.             $( function (){
  8.                 fila = $('#telefonos').html();
  9.  
  10.                 $('#anadir-campo').live('click', function(e){
  11.                     $(this).removeAttr('id').addClass('eliminar-campo').text('Eliminar');
  12.                     $('#telefonos').append(fila);
  13.                 });
  14.  
  15.                 $('.eliminar-campo').live('click', function(){
  16.                     $(this).closest('.clonar').remove();
  17.                 });
  18.             });
  19.         </script>
  20.  
  21.     <body>
  22.  
  23.     <div id="telefonos">
  24.         <div class="clonar t-2">
  25.             <p class="normal">
  26.                 <label>Teléfono:
  27.                 <input name="cont-telefono1" id="cont-telefono1" class="number ignore" maxlength="9" /></label>
  28.             </p>
  29.             <p class="normal2">
  30.                 <label>Extensión:
  31.                 <input name="cont-extension1" id="cont-extension1" class="number cont-extension ignore" maxlength="4" /></label>
  32.                 <span id="anadir-campo">Añadir</span>
  33.             </p>
  34.             <hr/>
  35.         </div>
  36.     </div>
  37.  
  38.     </body>
  39. </html>

borre todos esos atributos indices que tenias y para que funcione el label sin tener que cambiar el atributo for puse el input adentro

Y podés agregarle otros campos como característica, tipo, etc y no hay que modificar nada

aca tenés otro ejemplo
http://www.forosdelweb.com/f127/jque...tro-td-869391/