Question

我想在用户点击按钮时从页面中删除。

使用Javascript：

var close = function(element) {
        element.parentNode.parentNode.removeChild(element);
    }

关闭按钮：

<div id="close" onclick='close(this)'>X</div>

关闭按钮位于父div中。

当我点击按钮时，没有任何反应。

整个页面：

<!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>

Answer 1

只需使用：

document.getElementById('close').remove();

或者您可以使用

document.getElementById('close').onclick = function(event){
  let elem = document.getElementById(event.target.id)
  elem.remove ? elem.remove() : elem.removeNode();
}

Answer 2

<div>
    <a href="#" onClick="remove(this.parentNode)">...</a>
</div>
<script>
function remove(element) {
    element.parentNode.removeChild(element);
}
</script>

原样使用：）

Answer 3

<div id="close" onclick='close(this.id)'>X</div>
function remove(id) {
var elem = document.getElementById(id);
element.parentNode.removeChild(element);
}

Answer 4

出现此问题是因为在浏览器中执行javascript代码时，名称“close”指的是其他内容，因此您的onclick事件不会被调用。您必须将您的功能重命名为其他功能才能使其正常工作。

但是，您的代码仍然无法正常工作，尽管现在可以在onclick事件中调用它。你必须将它修改为这样的东西;

function(element) {
    element.parentNode.remove(element);
}

使用js删除<div>（无JQuery）

4 个答案: