Remove <div> with js (no JQuery)

Question

I want to remove a <div> from the page, when the user clicks a button.

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.

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>

Mohit Kumar · Accepted Answer · 2017-05-27 10:21:41Z

2

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

Use This as it is :)

answered May 27, 2017 at 10:21

Mohit Kumar

361 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D. Peter · Accepted Answer · 2017-05-29 13:16:56Z

1

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();
}

edited May 29, 2017 at 13:16

answered May 27, 2017 at 10:19

D. Peter

5273 silver badges12 bronze badges

2 Comments

GDavid Over a year ago

remove(); is not supported by all browsers. The problem is the function's name, not the removing method.

D. Peter Over a year ago

I added the use of removeNode for IE, tell me if another browser is missing

Rajat Masih · Accepted Answer · 2017-05-27 10:20:53Z

0

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

answered May 27, 2017 at 10:20

Rajat Masih

6231 gold badge8 silver badges20 bronze badges

4 Comments

Donald Duck is with Ukraine Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

GDavid Over a year ago

Yes, we would like to see, why does this code works while the other not.

Rajat Masih Over a year ago

because in other's code they are sending remove(this)or emove(this.parentNode) in and i am sending this.id means current div id it is a simple logic

Rajat Masih Over a year ago

and if you want to use to remove(this) then you have to do like this in your remove() function ----function remove(par){ var id = par.id;console.log(id);console.log(par); } you can see the result in console what var par and id have

Utku Tombul · Accepted Answer · 2017-05-27 10:38:51Z

0

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. 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. You'll have to modify it to something like this;

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

answered May 27, 2017 at 10:38

Utku Tombul

1761 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Remove <div> with js (no JQuery)

4 Answers 4

Comments

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related