Portada » JQuery biblioteca de JavaScript » Agregar más campos jQuery con botón Quitar

Agregar más campos jQuery con botón Quitar

Agregar más campos jQuery con botón Quitar. Mediante el uso de jquery puede añadir o duplicar más campos de entrada con el botón de borrado cerca de él y puede eliminar el archivo de borrar haga clic en el botón. Este método en requerido por clientes exigentes a la hora de requerir sus plataformas web, sin embargo aquí les traigo la solución para incrementar mas input, o caso contrario eliminarlas.

El lenguaje de Marcas HTML

<button id="add">Agregar Campos</button>
<div id="items">
 <div><input type="text" name="input[]"></div>
</div>

En primer lugar tenemos un único cuadro de entrada dentro de un div con el id de «items» y un botón que dice «Agregar Campos».

Agregar más campos jQuery con botón Quitar

Dentro de $(document).ready función de colocar el siguiente código jQuery.

jQuery code

//when the Add Field button is clicked
$("#add").click(function (e) {
 //Append a new row of code to the "#items" div
 $("#items").append('<div><input name="input[]" type="text" /><button class="delete">Delete</button></div>'); });

Ahora, cada vez que haga clic en «Añadir Campo» un nuevo campo de entrada con el botón eliminar.

Cuando una eliminación clic en el botón necesitamos quitar el campo de entrada correspondiente utilizando el código de abajo.

Boton Borrar

$("body").on("click", ".delete", function (e) {
	$(this).parent("div").remove();
});

Gracias por visitarnos, eso es todo por este articulo. En el siguiente tutorial nuevas novedades, hasta la proxima.

Agregar más campos jQuery con botón Quitar
Agregar más campos jQuery con botón Quitar

Referencia:

Remove Button

 

Descargar Demo

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad