Question

我有几个可点击的HTML元素，点击后都使用相同的JS功能。

现在当点击其中一个“floor”时，我希望它删除那个“tile”div和“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 killTile(){
    // Play explosion sound effect
    xpld.pause();
    xpld.currentTime = 0;
    xpld.play();
}

Answer 1

给函数一个参数：

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

然后将其称为：

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

Answer 2

为了删除DOM节点，您可以使用removeChild方法：

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

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

并将obj传递为：

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

Answer 3

你可以简单地使用它..

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

    obj.parentElement.remove();
}

将其称为onClick =＆＃34; KillTile（this）＆＃34;

单击时使用javascript删除HTML元素

3 个答案: