How do I remove a parent when a child is clicked

Question

How can I remove the entire div when any child image is clicked? Here is my HTML:

<div id="list1">
        <img src="FILE1.JPG" class="img">
        <img src="FILE2.JPG" class="img">
        <img src="FILE3.JPG" class="img">
</div>

<div id="list2">
        <img src="FILE4.JPG" class="img">
        <img src="FILE5.JPG" class="img">
        <img src="FILE6.JPG" class="img">
        <img src="FILE7.JPG" class="img">
</div>

Here is the jquery:

$('.img').click(function() {
    var $img = $(this);
    $.ajax({
        url: 'save-image.php?q=' + $(this).attr('id'),
        dataType: 'json',
        success: function(data) {
            $img.closest('div').remove();
        }
    });
});

I need to run an update script upon an image click, but then I need the entire div to disappear. This code is not working.

http://stackoverflow.com/questions/9751521/ http://stackoverflow.com/questions/5913761/ http://stackoverflow.com/questions/9942294/ http://stackoverflow.com/questions/8596468/ http://stackoverflow.com/questions/6010260/ http://stackoverflow.com/questions/3887648/ — c69, Sep 19 '12 at 16:39
The answer putting the remove statement above the success and saving the att id to a variable. $('img').click(function() { var ids = $(this).attr('id'); $(this).parent().remove(); $.ajax({ url: 'ajax.php?q=' + ids, dataType: 'json', success: function(data) { return data; } }); }); — , Sep 19 '12 at 17:42

score 2 · Answer 1 · answered Sep 19 '12 at 16:35

2

Use jQuery's .parent() and .remove()

answered Sep 19 '12 at 16:35

sachleen

30,730
8
78
73

1

So who downvoted all the answers? Is there anything wrong with them? – sachleen Sep 19 '12 at 18:06

score 2 · Answer 2 · answered Sep 19 '12 at 16:42

2

    $('img').click(function() {

    var clicked = $(this);

    $.ajax({
        url: 'ajax.php?q=' + $(this).attr('id'),
        dataType: 'json',
        success: function(data) {

            clicked.parent('div:first').remove();

        }
      });
    });

answered Sep 19 '12 at 16:42

taseenb

1,378
1
16
31

@user1614427 This code should work, although :first is not needed, surely you have other problems. – Ram Sep 19 '12 at 17:32
Shoot, that did not fix it either. – Sep 19 '12 at 17:36
If the success callback is not called it will never work. Add the error callback to see that it works: error: function(data) {clicked.parent('div:first').remove();} http://jsbin.com/avuwab/7/ – taseenb Sep 19 '12 at 23:30

Sushanth -- · Answer 3 · 2013-01-03T17:47:43.137

2

You can try parent and remove methods

$('img').click(function() {
    var $this = $(this);
    $.ajax({
        url: 'ajax.php?q=' + $this.attr('id'),
        dataType: 'json',
         success: function(data) {
            $this.parent().remove();
         }
     });
});

edited Jan 03 '13 at 17:47

answered Sep 19 '12 at 16:59

Sushanth --

55,259
9
66
105

This one seems super straight forward, but it does not remove the div as I'd expect. – Sep 19 '12 at 17:22

score 0 · Accepted Answer · answered Sep 19 '12 at 16:34

0

Try this,

Live Demo

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

It would be better if you could assign some class to img

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

answered Sep 19 '12 at 16:34

Adil

146,340
25
209
204

Thank you. This worked - at least I got to see it work after I got into the demo. – Sep 19 '12 at 17:41

score 0 · Answer 5 · answered Sep 19 '12 at 16:34

0

If you are using jQuery then you can:

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

answered Sep 19 '12 at 16:34

Andrew

6,254
16
59
93

score 0 · Answer 6 · answered Sep 19 '12 at 16:36

This should help you in accomplishing your task.

parent( [selector] ) Returns: jQuery Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

The first example given on the page is nearly identical to your problem.

How do I remove a parent when a child is clicked

6 Answers6