jquery - Jquery删除动态创建的可拖动div

Question

我使用此功能使用按钮动态创建 div

var counter = 1;
$("#button1").click(function(){
 $("<div/>", {
   "class": "test" + (counter++),
    text: "",
  }).resizable().draggable()
  .appendTo("body");
});

我将如何添加另一个按钮以删除这些动态创建的 div？

Answer 1

当然，在这种情况下，只需为每个动态添加的元素提供一个通用类.dynamic。然后，当按下另一个按钮时，只需删除该类的任何实例。

var counter = 1;

$("#button1").click(function(){
 $("<div/>", {
   "class": "dynamic test" + (counter++), // note we're adding a new generic class
    text: "",
  }).resizable().draggable()
  .appendTo("body");
});

$("#button2").click(function(){
 $(".dynamic").remove();
});

Answer 2

$("#button1").click(function(){
 $("<div/>", {
   "class": "dynamic test" + (counter++),
    text: "",
  }).append('<div id="button"' + (counter -1) + '">Close</div>').resizable().draggable()
  .appendTo("body");

  $("#button" + (counter -1)).click(function(){
      $(".test" + (counter-1)).remove();
   });
});

您还可以在每个创建的 div 上附加关闭按钮以关闭该 div