Question

在将此标记为重复之前，我的问题就是这样。

由于谷歌实际上缺乏内容，我能找到的就是删除父ID，我不认为这适用于父ID 只会移除面板体，然后保留面板标题和面板在那里。

我想问一个简单的问题，我在网上找不到任何帮助。我有一个自举面板，它有两个div的insdie，一个用于面板标题，一个用于面板主体。在panel-body div里面我有一个btn btn-success按钮，我想在点击时删除整个面板。

<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>

在javascript或jquery中（不介意哪一个），如何在不知道ID或类或根本没有访问面板div的情况下删除按钮的整个div onclick。我声明了面板主体的内容，而不是我声明面板的地方，它是两个divs panel-body和panel-header。

我想删除分配按钮的整个面板div，点击？

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

有人可以帮忙吗？

Answer 1

jQuery方法就是这个单行。

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

.closest()函数查找与提供的选择器匹配的最近父级。在这种情况下，它会检查this的每个父级，直到看到div.panel。

您可以将其放在onclick=""中，但事件属性在HTML中已弃用。标准期望在Javascript中设置事件。

Answer 2

我真的不明白为什么你不能像.panel一样使用面板div的类，例如：

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

但我认为这在技术上也有效：

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

使用JavaScript删除整个div

2 个答案: