JQuery biblioteca de JavaScript

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

 

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba