What I am trying to create is basically a close button for a cloned form. The form along with the close button is generated onclick() using the following function:
$("#newVolton").click(function(){
var index = 0;
$("#border").clone().attr('id', 'volton' + index).appendTo("#border");
index++;
});
and I want to be able to close said form using the button that is generated alongside the specific instance of the form.
How should I got about deleting the instance?
Thanks in advance!
I prefer to delegate
Make a main container and append to that Then each div has its own HTML and a delete button.
Note I hide the first delete to allow the clone source to stay
You can change it to a template if you do not want to have an initial div
$("#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>