如何删除 HTML 克隆元素

Question

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!

Answer 1

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>