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

💣 Descarga sistemas PHP y Laravel COMPLETOS GRATIS
Recursos premium listos para usar en proyectos reales 💻
👥 +1000 desarrolladores · 🔥 Publicaciones diarias
🔥 Unirme al canal GRATIS ahora 👥 Grupo de Facebook
⏳ Enlaces disponibles por tiempo limitado
💻 Sistemas completos 🔌 Plugins PRO ⚡ Scripts listos 🔥 Recursos exclusivos

<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

¿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.

Leave a comment

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