How to remove a div?

I have a question.

I need to remove a div on click in jQuery. Not display: none; but remove.

$("#div").live('click', function(){ $(this)._ _ _ _ _ _ _ _ ; });

And what's the difference between .live('click') and .click()

Thanks !

EDIT : THANKS A LOT GUYS FOR YOUR ANWSERS开发者_开发问答

Now, I have div1 inside div2. I need to remove div1 when I click on div1. But when I clicked on div2, div1 is removed... Why ?

$("#div").live('click', function(){ 
      $(this).remove(); 
 });

Click only works for existing DOM elements, live also takes account of elements that are added to the DOM later.

http://api.jquery.com/remove/

that should go

$(this).remove();

.click() binds only loaded DOM elements while .live('click') works for DOM elements which are added after the DOM was initially loaded.

This is how to do it:

$("#div").click(function() {
    $(this).remove();
});

The difference between someEvent and live('someEvent') is that the live approach jumps through some extra hoops to make sure that elements added to the DOM after you set the click event handler, but which match the selector of the jQuery element that set the handler, will also get that handler.

With simpler words: live affects "all elements that match this selector, even if they do not exist yet", while click affects "all elements that match this selector right now".

Since the selector in this case is an id selector, which means that probably there will not be another element with the same id added in the future (ids must be unique throughout the DOM), I simply used click instead of live.

Update:

The event handler will get called even if you click on any child of #div1. This is due to event bubbling behavior. If you want to check which element was the "real" source of the event, you need to do it this way:

$("#div").click(function(eventData) {
    if(eventData.target.id != 'div') {
        // This will prevent the removal if any element
        // other than #div _itself_ is clicked
        return false;
    }

    $(this).remove();
});

$('#div').click(function() {
    $(this).remove(); 
});

The different between .live('click', function() { ... }) and .click(function() { ... }) is that live allows you to attach a handler to the event now and in the future meaning that if this #div is updated in the DOM the event handler will stay. For example imagine a situation where you have a div which is replaced with an AJAX call. If you used .live to register a click event handler for this div the event handler will still work even after the div has been refreshed in the DOM. If you use .click then if the element is recreated you will need to reattach the handler.

your first question:

$(this).remove();

your second question:

.click() will add the click event to the object(s) you selected, the .live('click') will add the event to every object of your selection, also objects that you create in the future.

.remove(); to completely remove it .empty() to empty the div.

$(".myClass").live('click') will bind the click event to every element, present and future. Meaning if you add a new div with class "myClass", then the live click event will work on that one also.

.live adds the click event to any matching elements now and in the future. So if you add another matching element at some point, it will automatically have your click function.