Jquery удалить не работает для перетаскиваемого div

Question

При нажатии на ссылку создается div, который можно перетаскивать. У меня есть еще одна ссылка, которую я хочу использовать, чтобы удалить этот недавно созданный div.

Код запроса:

     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 код:

       <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 name = 'element'+ counter++;

Оператор постфиксного приращения counter++ возвращает старое значение, которое будет использоваться в качестве выражения, а затем увеличивает значение переменной, так что в результате вы получите div с идентификатором 0, но значение counter равно 1. Попробуйте заменить приращение префикса ++counter.

Кроме того, было бы неплохо сохранить эти созданные элементы в массиве, чтобы вы всегда могли получить доступ ко всем из них:

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

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

Answer 2

Изменить var olddiv= 'element'+ counter; на var olddiv= 'element'+ (--counter);