En el siguiente enlace, hay un botón para agregar más, quiero agregar más para crear el mismo campo de entrada con un botón de eliminación asociado, pero me gustaría hacerlo todo con js nativo si es posible.
https://codepen.io/aazim-khaki/pen/vYZmMRqJS actual:
$(function() { $(".btn-copy").on('click', function() { var ele = $(this).closest('.example-2').clone(true); ele.find('input').val('') if (ele.find('button').length < 2) { let btn = document.createElement("button"); btn.innerHTML = "Delete"; btn.onclick = (e) => { e.preventDefault() ele.remove() } ele[0].appendChild(btn); } $(this).closest('.example-2').after(ele); }) })Delegar
Moví la etiqueta del formulario y le di al botón una clase de eliminación
window.addEventListener("load", function() { document.querySelector(".row").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains('delete')) { tgt.closest('.example-2').remove() } else if (tgt.classList.contains('btn-copy')) { const ele = tgt.closest(".example-2").cloneNode(true); ele.querySelector("input").value = ""; if (ele.querySelectorAll("button").length < 2) { let btn = document.createElement("button"); btn.innerHTML = "Delete"; btn.classList.add("delete"); ele.appendChild(btn); } tgt.closest(".card-body").appendChild(ele) } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <h5 class="card-title">Add Class</h5> </div> <form action="#"> <div class="card-body"> <div class="example-2 form-group row"> <!--<label class="col-form-label col-md-2">Input Addons</label>--> <div class="col-xs-2"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Class Name</span> </div> <input class="form-control" type="text"> <div class="input-group-append"> <button class="btn-copy btn btn-primary" type="button">Add More</button> </div> </div> </div> </div> <div class="form-group row"> <div class="col-xs-2"> <button class="btn btn-primary" type="button">Submit</button> </div> </div> </div> </form> </div> </div> </div>Use un contenedor y una delegación de eventos para que solo use un oyente en lugar de adjuntar un oyente a cada botón de eliminación.
Este es un ejemplo muy simple pero los principios son los mismos.
// Cache your elements const container = document.querySelector('#container'); const add = document.querySelector('button'); // Add your container an add button listeners container.addEventListener('click', handleEvent, false); add.addEventListener('click', handleAdd(), false); // If a remove button is clicked, find the // the closest div wrapper and remove it from // the container function handleEvent(e) { const { id } = e.target.dataset; const row = e.target.closest('.row'); container.removeChild(row); } // `handleAdd` returns a function (closure) that // is used for the add listener rather than // maintaining a global variable. // We initialise the id at this point function handleAdd(id = 0) { // And now return the function that will be called // when the add button is clicked // For the purposes of this example it simply adds new HTML // to the container, and then increases the id return function() { const html = `<div class="row"><input value="${id}" /><button data-id="${id}">Remove</button></div>`; container.insertAdjacentHTML('beforeend', html); ++id; } } <button>Add</button> <div id="container"></div>