Geek Answers Handbook

Delete div on button click

I try to delete a button divwhen a button is pressed, but the problem is that I need a button to delete the div it contains, without passing the id of the div to the delete button

therefore, this code at the end should be able to remove the div without passing the id of the div, and will depend on passing the thisreference

<!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>
+4
source share
3 answers

If you want to learn how to use the link thisto get the element of the parent element to pass it to removeChild, then it is quite simple, just use 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 use it:

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

#divbuttonX .divbutton, CSS .

: http://jsfiddle.net/5qfjo0c7/

+4

. , 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>
Hide result
+2

Try this, it will help:

$ (this) .parent () closest ('DIV') hide (); ..

$("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>
Run codeHide result
0
source

More articles:


All Articles