jquery .remove 不起作用

Question

我试图在 onClick 上向 div 添加超链接，并且我打算当我再次点击时，附加的超链接将被删除...一切正常 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

您始终会附加锚链接，但如果已存在则将其删除。您需要在 if 后面添加 else 块。 IE：

<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 2

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

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

或者使用 live（但在这种情况下速度较慢）。

Answer 3

您添加的链接没有 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 以避免在删除旧链接后添加新链接。