Removing HTML elements with javascript when clicked

Question

I have several clickable HTML elements that all use the same JS function when clicked.

Now when one of "floor" is clicked I want it to remove that "tile" div and "floor" div.

<div class="col">
  <div class="tile">
    <div class="floor" onclick="killTile()"></div>
  </div>
  <div class="tile">
    <div  class="floor" onclick="killTile()"></div>
  </div>
  <div class="tile">
    <div class="floor" onclick="killTile()"></div>
  </div>
</div>
<div class="col">
  <div class="tile">
    <div class="floor" onclick="killTile()"></div>
  </div>
  <div class="tile">
    <div class="floor" onclick="killTile()"></div>
  </div>
  <div class="tile">
    <div class="floor" onclick="killTile()"></div>
  </div>
</div>

killTile function:

function killTile(){
    // Play explosion sound effect
    xpld.pause();
    xpld.currentTime = 0;
    xpld.play();
}

Barmar · Accepted Answer · 2014-10-25 10:49:18Z

2

Give the function a parameter:

function killTile(which) {
    // Play explosion sound effect
    xpld.pause();
    xpld.currentTime = 0;
    xpld.play();
    var tilediv = which.parentNode;
    tilediv.parentNode.removeChild(tilediv);
}

Then call it as:

<div class="floor" onclick="killTile(this)"></div>

answered Oct 25, 2014 at 10:49

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

dfsq · Accepted Answer · 2014-10-25 10:48:42Z

1

In order to remove a DOM node you can use removeChild method:

function killTile(obj) {
    // Play explosion sound effect
    xpld.pause();
    xpld.currentTime = 0;
    xpld.play();

    // remove parent node
    obj.parentNode.parentNode.removeChild(obj.parentNode);
}

and pass obj as:

<div class="tile">
    <div  class="floor" onclick="killTile(this)"></div>
</div>

answered Oct 25, 2014 at 10:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Mohd. Shaukat Ali · Accepted Answer · 2014-10-25 11:01:11Z

0

You can simply use this..

function killTile(obj){
    // Play explosion sound effect
    xpld.pause();
    xpld.currentTime = 0;
    xpld.play();

    obj.parentElement.remove();
}

Call it like onClick="KillTile(this)"

edited Oct 25, 2014 at 11:01

answered Oct 25, 2014 at 10:54

Mohd. Shaukat Ali

7525 silver badges7 bronze badges

2 Comments

Barmar Over a year ago

This just removes the floor, not the tile.

Barmar Over a year ago

Oops, I thought you were using removeChild, like the other answers. The problem with remove is that it's new, and not as compatible as removeChild. If you edit your answer to include caveats, I'll be able to remove my downvote.

Collectives™ on Stack Overflow

Removing HTML elements with javascript when clicked

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related