Is this the correct jQuery to remove a <div>?

I have the below html:

<div id="popups">
    <div id="cr开发者_JS百科eateform">
        <div id="createformInside">
            <input type="text" id="testTitle" size="20">
            <input type="text" id="testSubj">
            <span id="testOptions">More Options</span>
            <br/>
            <textarea id="testContent" ></textarea>
            <input type="button" value="Save Test" id="saveBttn">
        </div>
     </div>
</div>

The below jQuery is supposed to remove everything inside of the popups <div> when the save button is pushed. For some reason it is not. Any idea why not?

$('#saveBttn').click( function() {//if the save button on the create test form is clicked...
    $('#createform').remove();//gets rid of the create test form
})

Yes it's correct.

Just tested your sample code: http://jsfiddle.net/bFXKP/

Works fine from that demo so there could be something else you're missing.

You need to wrap the <input> fields in a <form> tag. Otherwise, the DOM doesn't have a way to know what to do with the inputs, or which inputs to 'submit' with the button.

Additionally, its generally considered better practice to have the event bind to the <form> tag's ID using submit(), rather than click(), since submit() will catch non-clicked submissions (ie, using the keyboard, enter button, etc).

EDIT: if console.log(jQuery) returns undefined, that means it means you either neglected to load jQuery, or you neglected to wrap the click function in a document ready closure.

Are you trying to stop multiple submissions to your form?

If so...

$('form').submit(function() {

    $(this).find('input[type=submit], button[type!=button]').attr({ disabled: 'disabled' });
});

It looks good to me. Are you having some sort of problem with this code or were you just asking?

You can also use

$('#createform').css('display','none');