Lo que intento crear es básicamente un botón de cierre para un formulario clonado. El formulario junto con el botón de cerrar se genera onclick() usando la siguiente función:
$("#newVolton").click(function(){ var index = 0; $("#border").clone().attr('id', 'volton' + index).appendTo("#border"); index++; });y quiero poder cerrar dicho formulario usando el botón que se genera junto a la instancia específica del formulario.
¿Cómo debo hacer para eliminar la instancia?
¡Gracias por adelantado!
prefiero delegar
Cree un contenedor principal y añádalo. Luego, cada div tiene su propio HTML y un botón de eliminación.
Tenga en cuenta que escondo la primera eliminación para permitir que la fuente de clonación permanezca
Puede cambiarlo a una plantilla si no desea tener un div inicial
$("#newVolton").on("click",function() { const $borders = $("#container").find(".border"); const idx = $borders.length; // count the existing number of divs $borders.eq(0).clone().attr('id', 'volton' + idx).appendTo("#container"); }); $("#container").on("click",".remove",function() { this.closest("div").remove() }); #container>div.border span.remove { display: none } #container>div.border~div.border span.remove { display: inline-block } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="newVolton">Add</button> <div id="container"> <div class="border" id="volton0"> Some html <span class="remove">X</span> </div> </div>