CODEWITHSUNDEEP
jquery
Maurice
Maurice

Reputation: 1092

jquery remove created elements, children included

I want to have this situation where if someone hover's a link, an element should be created dynamically with information about that link.

I know that there are some standard jquery scrips available for that, but for my understanding of jquery i want to make it myself.

I'll show the element like this:


    $(".event-date").live("mouseover",function(e){
        var event = e || window.event; 
        event.preventDefault();
        $(this).append("<div id='showEventInfoWrap'><div id='closeEventInfo'>Close</div><div id='showEventInfo'></div></div>");
        $("#showEventInfo").load("event-info.php");
    });

I use live() because the calendar is displayed in an <div> element, which changes when the users navigate through the months.

The problem is with hiding the div when: a) a user clicks the 'close' link; or b) a user hovers away from the appeared element.

I tried any of the following options, but neither of them worked:


    $("#closeEventInfo").live("click",function(e){
        $(this).parent().attr("id").remove();
        $("#showEventInfoWrap").remove();
        $("#showEventInfoWrap").children().remove();
        $("#showEventInfoWrap").add("#closeEventInfo").add("#showEventInfo").remove();
    });

I also tried empty() instead of remove() but without any result.

Does anybody maybe know what i'm doing wrong?

Upvotes: 2

Views: 108

Answers (1)

Rob W
Rob W

Reputation: 349012

$(this).parent().attr("id").remove();

throws an error, causing your script to terminate.
.attr() with a single argument returns a string or undefined. It's not a jQuery object, hence .remove is not defined.

  • If you want to remove the parent element, use: 

    $(this).parent().remove();

  • If you want to remove the ID attribute, use:

    $(this).parent().removeAttr("id");

$("#showEventInfoWrap").remove(); would remove the #showEventInfoWrap element, including its childs.

Upvotes: 3

Related Questions