按鈕單擊時刪除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