jquery .remove not working

Question

Я пытался добавить гиперссылку на div onClick, и я намеревался, что, когда я снова звоню, добавленная гиперссылка удаляется ... все работает нормально onClick, гиперссылка добавляется к предполагаемому div, но они не удаляются ...

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("[href=#]").click(function() { 
      if ($("#appendContainer").is(":parent")) { 
       var child = $("#appendContainer").children().attr("id"); 
       alert(child); 
       $('#' + child).remove(); 

      } 

      $("#appendContainer").append(
$("<a/>", { href: "#", id: "helloWorldLink" }).text("Helloworld")); 
     }); 
    }); 

</script> 




    <a href="#">click here</a> 
     <div id="appendContainer"></div> 

Answer 1

Ваша добавленная ссылка не имеет вашего слушателя onClick.

Попробуйте использовать .live() для установки обработчика событий. Используйте этот код:

$(document).ready(function() { 
     $("[href=#]").live('click', function() { 
      if ($("#appendContainer").is(":parent")) { 
       var child = $("#appendContainer").children().attr("id"); 
       alert(child); 
       $('#' + child).detach(); 
       return; 
      } 

      $("#appendContainer").append(
       $("<a/>", { href: "#", id: "helloWorldLink" }).text("Helloworld") 
      ); 
     }); 
}); 

Note, то, что я добавил return после detach(), чтобы избежать добавления новой ссылки только после удаления старого.

Answer 2

Вы всегда добавляете привязку, хотя вы ее удаляете, если она уже существует. После этого вам нужно добавить блок else. то есть:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("[href=#]").click(function() { 
      if ($("#appendContainer").is(":parent")) { 
       var child = $("#appendContainer").children().attr("id"); 
       alert(child); 
       $('#' + child).remove(); 

      } 
      else { 
      $("#appendContainer").append($("<a/>", { href: "#", id: "helloWorldLink" }).text("Helloworld")); 
      } 
     }); 
    }); </script> 

Answer 3

$(function() { 
    function linkClickHandler() { 
    var appendContainer = $('#appendContainer'); 
    appendContainer.children().remove(); 
    appendContainer.append(
     $('<a/>', { 
      href: '#', 
      id: 'helloWorldLink', 
      click: linkClickHandler, 
      text: 'HelloWorld' 
     }) 
    ); 

    $('[href=#]').click(linkClickHandler); 
    } 
} 

Или использовать вживую (но для этого случая он медленнее).