按钮单击时删除div

Question

I am trying to delete the div on button click but the problem that I need the button to delete the div that it contain to without passing the id of the div to the delete button 我试图删除div按钮单击，但问题是我需要按钮删除它包含的div而不将div的id传递给删除按钮

so this code at the end should be able to delete the div without passing the id of the div instead it will depend on passing this reference 所以最后这段代码应该能够删除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

If you want to know how to use this reference to get hold of the parent element to pass it to removeChild , then it's quite easy, just use parentNode : 如果你想知道如何使用this引用来获取父元素以将它传递给removeChild ，那么它很容易，只需使用parentNode ：

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

However, since you are using jQuery it makes sense to make use of it's power: 但是，既然你正在使用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();
});

I also changed ids #divbuttonX to class name .divbutton , CSS becomes simpler in this case too. 我还将id #divbuttonX更改为类名.divbutton ，在这种情况下CSS变得更简单。

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

Answer 2

You can use .closest to remove the div 您可以使用.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

Try this it would help: 试试这会有所帮助：

$(this).parent().closest('div').hide(); 。$（本）.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 个解决方案

解决方案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