delete div on button click
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
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
<!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>
3 answers
solution1
4 ACCPTED 2015-06-28 20:08:53
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 :
<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:
$(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.
solution2
2 2015-06-28 20:07:20
You can use .closest to remove the 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>
solution3
0 2015-06-28 20:15:14
Try this it would 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.