Removing the whole div with JavaScript

Question

Before you mark this as a duplicate, this is how my question is different.

Due to the lack of content actually on google, all that I can find is removing the parent ID, I don't think that applies as the parent ID would only remove panel-body, then leave panel-heading and the panel div there.

I wanted to ask a quick question that I couldn't find any help with online. I have a bootstrap panel, which has two div's insdie of it, one for the panel-header and one for the panel-body. Inside the panel-body div I have a btn btn-success button that I want to remove the whole panel on click.

<div id="draggable" class="habbo-notification panel panel-default">
    <div class="panel-heading">
        Panel Header
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-4">
                <font color="#B00049">
                    <h1 style="font-size:144px;margin-top:0;margin-left:14px;"><i class="fa fa-globe fa-6" aria-hidden="true"></i><h1>
                </font>
            </div>
            <div class="col-md-8">
                <p>
            Some content here
        </p>
        <br>
        <div class="btn btn-success" onclick="" style="width:100%">Close this</div>
            </div>
        </div>
    </div>
</div>
</div>

In javascript or jquery (don't mind which one), how could I remove the entire div onclick of the button, without knowing the ID or class, or having any access to the panel div at all. I declare the panel-body's content somewhere other than the place where I declare the panel and it's two divs panel-body and panel-header.

I want to remove the whole panel div that the button is assigned to, on click?

<div class="btn btn-success" onclick="" style="width:100%">Close this</div>

Can anyone help?

Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Feb 20 '17 at 21:23
I realize this, I have googled it but nothing shows it in this way, my question is different. I'll explain why. — Ashkru, Feb 20 '17 at 21:26
Either is fine, although I would prefer to totally remove it. — Ashkru, Feb 20 '17 at 21:27
Like I said, I don't know any jquery to try, the jquery I have ran across only removes the parent div, please read in my question at the start. — Ashkru, Feb 20 '17 at 21:29
Honestly, search for the title of your question. The second result was [this question](http://stackoverflow.com/q/3387427/215552). — Heretic Monkey, Feb 20 '17 at 21:31
@MikeMcCaughan It says in the question *how could I remove the entire div onclick of the button, without knowing the ID or class*, so I guess your recommendation will not fit here — empiric, Feb 20 '17 at 21:32
Took me less than a minute to find on Google, how to do this with jQuery - http://stackoverflow.com/questions/9525248/remove-parent-div-by-class-name-jquery — Styphon, Feb 21 '17 at 02:27

score 2 · Answer 1 · edited Feb 20 '17 at 21:35

The jQuery method is this one-liner.

$('.btn-success').on('click', function(){
    $(this).closest('div.panel').remove();
});

The .closest() function looks for the nearest parent matching the supplied selector. In this case, it checks each parent of this until it sees div.panel.

You could drop this in your onclick="", though onevent attributes are deprecated in HTML. Standards expect events to be set within the Javascript.

score 0 · Accepted Answer · answered Feb 20 '17 at 21:38

I don't really get why you can't use the class(es) of the panel div like .panel, for example:

$(".btn").click(function(){
     $(".panel").css("display","none");
});

But I think this would technically also work:

 $(".btn").click(function(){
         $(this).parent().parent().css("display","none");
    });

Removing the whole div with JavaScript

2 Answers2