移除<div>使用 js（没有 JQuery）
[英]Remove <div> with js (no JQuery)
问题描述
I want to remove a <div> from the page, when the user clicks a button.
当用户单击按钮时，我想从页面中删除<div> 。
Javascript: Javascript：
var close = function(element) {
element.parentNode.parentNode.removeChild(element);
}
Close button:关闭按钮：
<div id="close" onclick='close(this)'>X</div>
The close button is inside a parent div.关闭按钮位于父 div 内。
When i click the button, nothing happens.当我单击按钮时，没有任何反应。
The entire page:整个页面：
<!doctype html>
<html>
<head>
<style>
#container {
position:absolute;
background-color: teal;
}
#dragc{
position: absolute;
background-color: white;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#header{
position: relative;
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#202020, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#202020, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#202020, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(#202020, black); /* Standard syntax */
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
height: 30px;
width: 100%;
color: white;
font-size: 30px;
}
#taskbar{
position: absolute;
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#202020, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#202020, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#202020, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(#202020, black); /* Standard syntax */
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
height: 40px;
width: 100%;
bottom: 0px;
color: white;
font-size: 35px;
}
#close{
position: absolute;
right: 0px;
top: 0px;
background: red;
background: -webkit-linear-gradient(red, #800000); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, #800000); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, #800000); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, #800000); /* Standard syntax */
color: white;
font-size: 30px;
font-family: consolas;
text-align: center;
line-height: 100%;
width: 30px;
height: 30px;
}
</style>
<script>
var close = function(element) {
element.parentNode.parentNode.removeChild(element);
}
var mydragg = function() {
return {
move: function(divid, xpos, ypos) {
divid.style.left = xpos + 'px';
divid.style.top = ypos + 'px';
},
startMoving: function(divid, container, evt) {
evt = evt || window.event;
var rec = divid.getBoundingClientRect();
var posX = evt.clientX,
posY = evt.clientY,
divTop = rec.top,
divLeft = rec.left,
eWi = parseInt(divid.style.width),
eHe = parseInt(divid.style.height),
cWi = parseInt(document.getElementById(container).style.width),
cHe = parseInt(document.getElementById(container).style.height);
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt) {
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
if (aX < 0) aX = 0;
if (aY < 0) aY = 0;
if (aX + eWi > cWi) aX = cWi - eWi;
if (aY + eHe > cHe) aY = cHe - eHe;
mydragg.move(divid.parentNode, aX, aY);
}
},
stopMoving: function(container) {
document.onmousemove = function() {}
},
}
}();
</script>
</head>
<body>
<div id='container' style="width: 100%;height: 100%;top:0px;left:0px;">
<div id="taskbar">
</div>
<div id="dragc" style="width: 200px;height: 100px; left: 30%; top: 20%;">
<div id="header" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
</div>
<div id="close" onclick='close(this)'>X</div>
<div>
</div>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
2 已采纳 2017-05-27 10:21:41
<div>
<a href="#" onClick="remove(this.parentNode)">...</a>
</div>
<script>
function remove(element) {
element.parentNode.removeChild(element);
}
</script>
Use This as it is :)
解决方案2
1 2017-05-27 10:19:02
simply use :只需使用：
document.getElementById('close').remove();
or you can use或者你可以使用
document.getElementById('close').onclick = function(event){
let elem = document.getElementById(event.target.id)
elem.remove ? elem.remove() : elem.removeNode();
}
解决方案3
0 2017-05-27 10:20:53
<div id="close" onclick='close(this.id)'>X</div>
function remove(id) {
var elem = document.getElementById(id);
element.parentNode.removeChild(element);
}
解决方案4
0 2017-05-27 10:38:51
The problem occurs because the name "close" refers to something else when executing javascript code in your browser, therefore your onclick event doesn't get called.出现问题是因为在浏览器中执行 javascript 代码时，名称“close”指的是其他内容，因此不会调用您的 onclick 事件。 You have to rename your function to something else to make it work.您必须将函数重命名为其他名称才能使其工作。
However, your code still will not work although it'll be called on onclick event now.但是，尽管现在将在 onclick 事件上调用它，但您的代码仍然无法工作。 You'll have to modify it to something like this;你必须把它修改成这样；
function(element) {
element.parentNode.remove(element);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 JS/jQuery 删除 WordPress 页面中 div 内的最后一个逗号 - Remove last comma inside a div in a WordPress page using JS/jQuery
如何使用 jquery 或普通 JS 从 div 中删除子元素 - How to remove child element from div using jquery or normal JS
Jquery附加div并删除div - Jquery to append a div and to remove a div
在jQuery中删除div - remove div in jquery
去掉 <div> 使用jQuery - Remove <div> using jQuery
jQuery不会删除div - Jquery will not remove div
jQuery删除div onclick - jQuery remove div onclick
使用 JQuery 动态删除 DIV - Remove DIV dynamically with JQuery
这是正确的jQuery删除一个 <div> ？ - Is this the correct jQuery to remove a <div>?
。去掉（）; jQuery附加div - .remove(); jquery appended div
相关标签