En un post anterior expliqué como se podían agregar campos usando jquery, varias personas me preguntaron como hacer para borrar un campo específico, pues es muy simple en realidad, veamos:

Agregando campos

Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos permita borrarlos, además para poder identificarlos vamos a ponerle un contador.

1
2
3
4
5
emails=0;
function agregar() {
    emails=emails+1;
    $("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25" />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
}

De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que invoca a la función borrar(1), borrar(2), etc.

Borrando los campos

La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que «salte» la página cuando le damos click al link borrar.

1
2
3
4
function borrar(cual) {
    $("li.email"+cual).remove();
    return false;
}

Como ven con sólo un par de líneas ya esta funcionando, espero les sea util este post.

Demo