使用 Onclick 删除带有按钮的 div（其 id 是用 php 制作的）不起作用

Question

我正在尝试使用 onclick 使按钮删除它所在的 div。我尝试了几种方法（降低可见性，使用 GetElementById，将 outerHTML 设置为 0，但我仍然卡住，希望得到帮助。

我要删除的 div 是顶部的 id 为 "Attraction.$numofatr"

$numofatr 应该是一个数字。

HTML 代码

<div id = "<?php echo "Attraction.R.$numofatr";?>" class = "attraction">
  <div class = "atr_image">
    <img src="images/oldtown.jpg" alt="">
  </div>
  <div class= "atr_container">
    <button class="button1" id = "<?php echo "R.$numofatr";?> " onclick = "Remove(this.id)">Remove Attraction</button>
  </div>
</div>

Javascript 代码

function Remove(elem){
  var Attraction = "Attraction" + document.getElementById(elem);
  elem.parentNode.removeChild( document.getElementById(Attraction));

  //NOTE - I ALSO TRIED OTHER WAYS SUCH AS:
  // document.getElementById(Attraction).outerHTML = "";
  //document.getElementById(Attraction).style.display="none";
}

注意：我对 stackoverflow 和 Web 开发还是新手。

注2：我认为$numofatr的定义是正确的，问题出在JS命令上。

注意 3：我更改了按钮 div，因为我被告知 html id 不应该是数字。问题依然存在。

注4：这是整个结构。我怀疑缺少任何 div。

<div id="<?php echo "Attraction.R.$numofatr" ; ?>" class="attraction">
  
  <div class="atr_image">
    <img src="images/oldtown.jpg" alt="">
  </div>

  <div class="atr_container">
    <div class="atr_name">
      <a><?php  echo $name; ?></a>
    </div>
    <div class="atr_region">
      <p><?php   echo $region;?> </p>
    </div>
    <div class="atr_desc">
      <p><?php  echo $desc1; ?></p>
    </div>
    <div class="atr_time_container">
      <div class="atr_time">
        <p><?php  echo $hours; ?> </p>
      </div>
      <span class="dot"></span>
      <div class="atr_hours">
        <p><?php echo $actual; ?></p>
      </div>
    </div>

    <button class="button1" id="<?php echo "R. $numofatr"?> " onclick="Remove(this.id)">Remove Attraction</button>

    <script>
      function Remove(elem) {
        var Attraction = document.getElementById("Attraction" + elem);
        Attraction.remove();
      }
    </script>
  </div>

</div>

Answer 1

试试这个：

<div id = "<?php echo "Attraction.$numofatr";?>" class = "attraction">

<div class = "atr_image"><img src="images/oldtown.jpg" alt=""></div>

<div class= "atr_container">



<button class="button1" id = "<?php echo "$numofatr";?> " onclick = "Remove(this.id)">Remove Attraction</button>

</div>

你的 JS 可以是这样的：

function Remove(elem){
    var Attraction = document.getElementById("Attraction"+elem);
    Attraction.remove();
}

下面是对 JSFiddle 的简单测试： https://jsfiddle.net/rv5dby92/

Answer 2

如果你想删除<div id = "<?php echo "Attraction.$numofatr";?>" class = "attraction">上的div

function Remove(elem){
    document.getElementById('Attraction'+elem).remove();
}

请注意，您使用的是带有数值的 id 属性。也许这在 HTML 标准中是无效的

您的代码包含elem.parentNode.removeChild 听起来像是转到元素的父元素，然后返回子元素。 对于 removeChild 从 w3schools.com 教程中尝试： https://www.w3schools.com/jsref/met_node_removechild.asp

希望你解决

Answer 3

看到更新后的 HTML，您似乎在每个 Attraction 块中声明了 Remove() 函数。在这种情况下，您可以简单地将匿名函数传递给onclick，该函数接收要作为闭包移除的节点。

onclick="(node => node.remove())(this.closest('.attraction'))"

<div id="Attraction1" class="attraction">
  <div class="atr_image">
    <img src="images/oldtown.jpg" alt="">
  </div>
  <div class="atr_container">
    <button class="button1" onclick="(node => node.remove())(this.closest('.attraction'))">Remove Attraction</button>
  </div>
</div>

---

如果您总是想删除按钮的父级，您可以简单地将parentNode 传递给Remove()，而无需查询 DOM。

onclick="Remove(this.parentNode)"

function Remove(node) {
  node.remove();
}

<div id="Attraction1" class="attraction">
  <div class="atr_image">
    <img src="images/oldtown.jpg" alt="">
  </div>
  <div class="atr_container"></div>
  <button class="button1" onclick="Remove(this.parentNode)">Remove Attraction</button>
</div>

---

如果您将按钮包装在 atr_container div 中，则可以使用 .closest() 传递具有相关类的最近祖先。

onclick="Remove(this.closest('.attraction'))"

function Remove(node) {
  node.remove();
}

<div id="Attraction1" class="attraction">
  <div class="atr_image">
    <img src="images/oldtown.jpg" alt="">
  </div>
  <div class="atr_container">
    <button class="button1" onclick="Remove(this.closest('.attraction'))">Remove Attraction</button>
  </div>
</div>

Answer 4

您可以通过像这样创建按钮来简化此操作：

<button class="button1" onclick="Remove(this.parentElement.id)">Remove Attraction</button>

这样你的按钮就不需要id，你也不需要在你的Javascript函数中将“Attraction”连接到传递的id。