Remove Parent Without An Id Or Class Using Jquery

So I have some html that looks like the following:

Solution 1:

You can use this to reference to the button that was clicked inside the click handler.

$("button").click(function(){
    removeParent($(this));
});

functionremoveParent(buttonThatWasClicked){
    buttonThatWasClicked.parent().remove();
}

Solution 2:

I would add a class to the buttons so the function does not get bound to every button on the page only the ones you would like it to.

<divclass='something unknown'id='something unknown'><buttonclass="myClass">Remove me and my parent div</div></div><divclass='something unknown'id='something unknown'><buttonclass="myClass" >Remove me and my parent div</div></div>

Then use the jquery class selector to bind a function that removes the parent.

$(".myClass").click(function(){
    $(this).parent().remove();
});

Demo: http://jsfiddle.net/cXLqK/

Solution 3:

If you have onclick on HTML nodes (i.e. not set via jQuery):

<divclass='classA'id='idA'><buttononclick='removeParent(this)'>Remove me and my parent div</div></div><divclass='classB'id='idB'><buttononclick='removeParent(this)'>Remove me and my parent div</div></div>

then this will work:

removeParent = function(e) {
    $(e).parent().remove();
}

Working example:

• http://jsfiddle.net/VEETt/

Share