jquery .remove不工作

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") 
      ); 
     }); 
}); 

注意，我所说的detach()后添加return避免只删除旧后增加新的链接。

Answer 2

你总是追加锚链接好像你是否已经存在，删除它。你需要在if之后添加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); 
    } 
} 

或者使用live（但是对于这种情况它比较慢）。