Question

我正在尝试删除按钮点击上的div，但问题是我需要按钮删除它包含的div而不将div的id传递给删除按钮

所以最后这段代码应该能够删除div而不传递div的id，而是依赖于传递this引用

<!doctype html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(document).on('mouseenter', '#divbutton', function() {
                $(this).find(":button").show();
            }).on('mouseleave', '#divbutton', function() {
                $(this).find(":button").hide();
            });
        });
    </script>

    <style>
        #divbutton {
            height: 100px;
            background: #0000ff;
        }

        #divbutton2 {
            height: 100px;
            background: #0000ff;
        }

        #divbutton3 {
            height: 100px;
            background: #0000ff;
        }
    </style>
</head>
<body>
    <div id="divbutton">
        <button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton'))">Hello</button>
    </div>

    <div id="divbutton2">
        <button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton2'))">Hello </button>
    </div>

    <div id="divbutton3">
        <button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton3'))">Hello </button>
    </div>
</body>

</html>

Answer 1

如果您想知道如何使用this引用来获取父元素以将其传递给removeChild，那么这很简单，只需使用parentNode：

<div class="divbutton">
    <button type="button" style="display: none;" id="i" onclick="document.body.removeChild(this.parentNode)">Hello</button>
</div>

但是，由于你使用的是jQuery，因此利用它的功能是有意义的：

$(document).on('mouseenter', '.divbutton', function () {
    $(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
    $(this).find(":button").hide();
}).on('click', ':button', function() {
    $(this).parent().remove();
});

我还将ids #divbuttonX更改为类名.divbutton，在这种情况下CSS变得更简单。

演示： http://jsfiddle.net/5qfjo0c7/

Answer 2

您可以使用.closest删除div

 $(document).ready(function () {
            $(document).on('mouseenter', 'div[id^=divbutton]', function () {
                $(this).find(":button").show();
            }).on('mouseleave', 'div[id^=divbutton]', function () {
                $(this).find(":button").hide();
            });
           $(document).on('click', 'button#i', function () {
                $(this).closest("div").remove();
            });

 });

#divbutton {
height: 100px;
background: #0000ff;
}

#divbutton2 {
height: 100px;
background: #0000ff;
}

#divbutton3 {
height: 100px;
 background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divbutton">
<button type="button" style="display: none;" id="i"  >Hello</button>
</div>

<div id="divbutton2" >
<button type="button" style="display: none;" id="i">Hello    </button>
</div>

<div id="divbutton3" >
<button type="button" style="display: none;" id="i">Hello    </button>
</div>

Answer 3

试试这会有所帮助：

<强> $（本）.parent（）最接近（ 'DIV'）隐藏（）;

$("button").click(function () {
    $(this).parent().closest('div').hide();
});

DEMO：

$("button").click(function () {
    $(this).parent().closest('div').hide();
});

#divbutton {
    background:powderblue;
    padding:10px;
    height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="divbutton">
<button id="i">Hello</button>
</div>

按钮单击时删除div

3 个答案: