I guess this is a very basic question, but I have not been able to figure out the proper way to use "remove".

I want to use Jquery to make a button which deletes its parent container. Here is my Fiddle and Code.

As of now nothing happens, I havent even been getting a console error.

I have tried other methods (instead of "parents") including closest, with similar outes. Fiddle

  <div class="delete_me">
<h3>Delete Me</h3>
<div>
    <input type="text" placeholder="DELETE ME">
</div>
<button name="button" onclick="removeThis();" type="button">Delete everything in my parent div</button>

function removeThis(){
    $(this).parents('.delete_me').remove();
};

I guess this is a very basic question, but I have not been able to figure out the proper way to use "remove".

I want to use Jquery to make a button which deletes its parent container. Here is my Fiddle and Code.

As of now nothing happens, I havent even been getting a console error.

I have tried other methods (instead of "parents") including closest, with similar outes. Fiddle

  <div class="delete_me">
<h3>Delete Me</h3>
<div>
    <input type="text" placeholder="DELETE ME">
</div>
<button name="button" onclick="removeThis();" type="button">Delete everything in my parent div</button>

function removeThis(){
    $(this).parents('.delete_me').remove();
};

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 21, 2015 at 20:45 WhyEnBeWhyEnBe 29577 silver badges2222 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Updated fiddle.

I guess that you can't add an id or an class so you have to pass the the object clicked to the function, example :

HTML :

<button name="button" onclick="removeThis(this);" type="button">Delete everything in my parent div</button>

JS :

function removeThis(_this){
    $(_this).parents('.delete_me').remove();
};

NOTE : If you can add id or class use solution in the other answers because Inline Event Handlers are really not remended.

Hope this helps.

Here man: https://jsfiddle/leojavier/t375qrwL/4/

<div class="delete_me">
    <h3>Delete Me</h3>
    <div>
        <input type="text" placeholder="DELETE ME">
    </div>
    <button name="button" type="button">Delete everything in my parent div</button>
 </div>

JS

$('button').on('click', function(){
    $(this).parent().remove();
});

When using your code with the inline listener, your scope of this bees the window. You should avoid adding event listeners inline anyways, so try it like this:

$('.delete_me button').on('click', function() {
  $(this).closest('.delete_me').remove();
});

The reason your function is not working is that your this keyword is not scoped to the button*. In your function this refers to the window instead of the button being clicked. If you set up your function as a JQuery .on('click', function(){...}) event, this will be properly scoped to the button that was clicked:

HTML:

<div class="delete_me">
  <h3>Delete Me!</h3>
  <div>
    <input type="text" placeholder="DELETE ME">
  </div>
  <button id="removeBtn">Delete everything in my parent div</button>
</div>

JQuery:

$('#removeBtn').on('click', function(){
  $(this).parents('.delete_me').remove();
});

JSFiddle Demo

* in addition to the fact that you declare the function in an on-load handler so it goes out of scope once the on-load handler finishes