So I have some html that looks like the following:

<div class='something unknown' id='something_unknown_1'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
<div class='something unknown' id='something_unknown_2'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>

...and so on. How exactly would I reference the button that fired the onClick without knowing the id of the button? I would like to eventually have my removeParent(self) method look like:

buttonThatWasClicked.parent().remove();

So I have some html that looks like the following:

<div class='something unknown' id='something_unknown_1'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
<div class='something unknown' id='something_unknown_2'>
  <button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>

...and so on. How exactly would I reference the button that fired the onClick without knowing the id of the button? I would like to eventually have my removeParent(self) method look like:

buttonThatWasClicked.parent().remove();

• javascript
• jquery
• html

• 1 Inline javascript is evil. You should try to practice unobtrusive javascript. – Paolo Bergantino Commented Mar 22, 2012 at 0:26
• 1 @PaoloBergantino: It is not evil. No need to be dogmatic about your preferences. – user1106925 Commented Mar 22, 2012 at 0:33
• @amnotiam: Since when did remending industry best practices turn into being "dogmatic about preferences"? The "evil" part was obviously tongue-in-cheek, but inline javascript is definitely something that should be avoided at all costs. – Paolo Bergantino Commented Mar 22, 2012 at 1:10
• @PaoloBergantino: I don't see how saying "should be avoided at all costs" is much different from calling it "evil", but calling it an "industry best practice" doesn't impress me. There are times when inline handlers are appropriate, and in fact beneficial. It's no more intrusive to add an onclick attribute than it is to add a class attribute for the purpose of hooking up a handler after the DOM is ready. – user1106925 Commented Mar 22, 2012 at 1:25
• @amnotiam: inline javascript is wrong for many reasons, and there are really no valid scenarios nowadays where it is excusable to use. It is harder to maintain, harder to understand, prone to errors, and mixes behavior with structure. All of the above is not really an opinion but widely agreed upon. I'm not sure how else to say it without sounding like a condescending jerk, but it is what it is. – Paolo Bergantino Commented Mar 22, 2012 at 2:08

3 Answers 3

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

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

function removeParent(buttonThatWasClicked){
    buttonThatWasClicked.parent().remove();
}

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.

<div class='something unknown' id='something unknown'>
  <button class="myClass">Remove me and my parent div</div>
</div>
<div class='something unknown' id='something unknown'>
  <button class="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/cXLqK/

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

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

then this will work:

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

Working example:

• http://jsfiddle/VEETt/