CODEWITHSUNDEEP
jquery
FastTrack
FastTrack

Reputation: 8980

Remove DIV on Click

I have a DIV which I want to be removed when I click a link contained inside that DIV. Here is what I have:

<div id="clients-edit-wrapper">
    <div class="close-wrapper">
        <a href="#" class="close-div">Close</a>
    </div>
</div>

When I click "Close" I want clients-edit-wrapper to be removed. I'm looking for a way to do this by referencing the parent DIV of the Close link which, in this case, is clients-edit-wrapper.

Any help would be greatly appreciated!

Answer from Huangism below:

$('.close-div').click(function(){
   $(this).parent().parent().remove();
});

This only works if the element you would like to remove is two parents up. In my case, this is exactly what I needed.

Upvotes: 14

Views: 63290

Answers (8)

shreekunj
shreekunj

Reputation: 27

$('body').on('click','.close-div', function(){
  $(this).closest("#clients-edit-wrapper").remove();
});

Upvotes: -1

Huangism
Huangism

Reputation: 16448

given your html markup

Updated to .on()

$('.close-div').on('click', function(){
    $(this).closest("#clients-edit-wrapper").remove();
});

More flexibility with .closest, this gives you the option to have more more parents or less parents.

https://api.jquery.com/closest/

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Edit
(Added related resources)
Please see jQuery documentation on live()

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

As far as I know this is due to memory concerns/issues with live().

Upvotes: 18

VisioN
VisioN

Reputation: 145458

Here is one solution:

$(".close-div").on("click", function(event) {
    $("#clients-edit-wrapper").remove();
    event.preventDefault();
});

To get #clients-edit-wrapper element relatively to .close-div element, you can use either parent().parent() or closest with ID:

$(this).parent().parent().remove();                  // will do
$(this).closest("#clients-edit-wrapper").remove();   // the same

However, the last doesn't make sense, since IDs of page elements should be unique, and there won't be another #clients-edit-wrapper.

Upvotes: 9

Aboodred1
Aboodred1

Reputation: 1513

<div id="clients-edit-wrapper">
    <div class="close-wrapper">
         <a href="#" onclick="$('#clients-edit-wrapper').remove();" class="close-div">Close</a>
    </div>
</div>

Upvotes: 1

Sampson
Sampson

Reputation: 268462

Since you base the element off the parent, I'd encourage event-delegation:

$("#clients-edit-wrapper").on("click", ".close-div", function(e){
    e.preventDefault();
    $(e.delegateTarget).remove();
});

Upvotes: 1

Josh
Josh

Reputation: 12566

$(".close-div").click(function(){

    $("#clients-edit-wrapper").remove();

});

Upvotes: 2

lucuma
lucuma

Reputation: 18339

You could use closest as well.

$('.close-div').on('click', function(e) {
  e.preventDefault();
  $('#clients-edit-wrapper').remove();
});

Upvotes: 1

Gabe
Gabe

Reputation: 50523

$('#clients-edit-wrapper').find('.close-div').click(function(){
   $('#clients-edit-wrapper').remove();
});

Upvotes: 1

Related Questions