pero con jquery? ahi veo que el primero es con jquery y el segundo con javascript puro
con jquery es bastante sencillo, claro, mínimo una lectura a la documentación (yo no sé inglés pero viendo los ejemplos se nota que hace)
buscá en la doc que hace cada método, lo que usé se ocupa todos los días
es simple pero con más campos es lo mismo, click en borrar sube hasta el div padre con class 'linea' y borra ese div, click en agregar agrega al div #contenedor la cadena que contiene html en la variable linea
por eso si agregas inputs va a ser lo mismo
para sumar tengo la funcion que selecciono los campos cantidad, sumo y muestro el valor en el input total, esa funcion la meto en el evento cuando se borra un campo para que me vuelva a calcular
Código HTML:
Ver original <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> $( function (){
var limite = 5;
var linea = '
<div class="linea">Precio:
<input type="text" class="cantidad" name="cantidad" /><a href="#" class="borra">Eliminar
</a></div>';
$('#agrega').live('click', function (){
if ( $('#contenedor .linea').length < limite)
$('#contenedor').append(linea);
});
$('#contenedor .borra').live('click', function(){
$(this).closest('.linea').remove();
calcularTotal();
});
$('#contenedor input.cantidad').live('keyup', function(){
calcularTotal();
});
});
function calcularTotal(){
var total = parseInt(0);
$('#contenedor input.cantidad[value!=""]').each( function (){
total += parseInt( $(this).val() );
});
$('#total').val(total);
}
#contenedor{margin-bottom:10px;}
#contenedor .linea{margin-bottom:5px; background:#ccc; width:250px; padding:3px}
<a href="#" id="agrega">Agregar
</a><br /> Total:
<input type="text" name="total" id="total" />