按钮单击时删除div

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();
});

我还将id #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();
});

演示：

 $("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 个解决方案

解决方案1
4 已采纳 2015-06-28 20:08:53

解决方案2
2 2015-06-28 20:07:20

解决方案3
0 2015-06-28 20:15:14

按钮单击时删除div

问题描述

3 个解决方案

解决方案1 4 已采纳 2015-06-28 20:08:53

解决方案2 2 2015-06-28 20:07:20

解决方案3 0 2015-06-28 20:15:14

解决方案1
4 已采纳 2015-06-28 20:08:53

解决方案2
2 2015-06-28 20:07:20

解决方案3
0 2015-06-28 20:15:14