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

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

2 个答案: