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

Question

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

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

$numofatr应该是一个数字。

网页代码

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

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";
}

注意：我仍然是堆栈溢出和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

看到更新后的 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_containerdiv 中，您可以使用.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 2

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

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

请注意，您将 id 属性与数值一起使用。也许这在HTML标准下是无效

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

希望你解决了

Answer 3

试试这个：

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

您可以通过创建按钮来简化此操作，如下所示：

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

这样，您的按钮就不需要id，也不需要将"吸引力"连接到Javascript函数中传递的id。