Question

i was trying to add a hyperlink to a div onClick and i intended that when i clink again the appended hyperlink is removed… everything is working fine onClick the hyperlink is appended to the intended div but they are not being removed…

<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

Your added link doesn’t have your onClick listener.

Try to use .live() to set event handler. Use this code:

$(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, what i’ve added return after the detach() to avoid adding new link just after removing old one.