Question

单击链接时，会创建一个可拖动的div。我有另一个链接，我希望能够用来删除这个新创建的div。

Jquery代码：

     var counter = 0;

 $(document).ready(function(){
 $("#alphalink").click(function(){ 

               var name = 'element'+ counter++;

                $('#elementarea').prepend('<div id="' + name + '"></div>');
               $("#" + name).prepend('<img id="theImg" src="http://us.metamath.org/symbols/alpha.png" />'); 
               $("#" + name).css("z-index", counter);  
                $("#" + name).css("position", "absolute");
                $("#" + name).draggable({ cursor: "move"});
               });


  $("#cleardiv").click(function(){ 
                 var olddiv= 'element'+ counter;
                 alert(olddiv);
                 $("#element" + counter).remove();
                      });

 });

HTML code：

       <div id="elementarea" style="width:300px; height:200px; background-color:#ccc; margin-top:10px; margin-right: 15px; float:left ">
         <p>Staging area here</p>
         </div>
        <div id ="alphalink">
    <p> Alpha Click </p>
     </div>


     <div id ="cleardiv">
     <p> clear item </p>
      </div>

点击“Alpha Link”后，会创建一个可拖动的div。单击“清除项目”时，应删除div。

但是，jquery .remove（）似乎不会删除这个新创建的div。这个例子出了什么问题？

您可以在此处试用整个代码 - http://jsbin.com/iboxoy/95/edit#source

Answer 1

将var olddiv= 'element'+ counter;更改为var olddiv= 'element'+ (--counter);

Answer 2

问题在于：

var name = 'element'+ counter++;

后缀增量counter++运算符返回旧值以用作表达式的结果，然后递增变量，因此最终得到div，id为0，但counter值为1尝试用前缀增量++counter替换。

此外，最好将这些创建的div保存在一个数组中，这样您就可以随时访问所有这些：

var divs = [];
//Inside 'alpha click' handler
    divs.push($("#" + name));

//inside "cleardiv" handler
    var toRemove = divs.pop();
    toRemove.remove();

Jquery删除不适用于draggable div

2 个答案: