带JavaScript代码的HTML按钮无响应，疑似CSS/HTML问题求助

问题根源 #

你的JavaScript代码里犯了一个基础错误：选择器写错了。
你用document.querySelector("al-login")是在找名为<al-login>的标签，但实际要删除的是class为al-login的div元素，正确的选择器应该是.al-login（类选择器需要加.前缀）。这个错误会导致div变量返回null，执行div.parentNode.removeChild(div)时直接抛出错误，按钮自然没反应。

至于你觉得是CSS的问题，其实是误解——移除CSS后能正常工作，大概率是你测试时无意中修正了选择器，或者浏览器的临时兼容表现，但核心问题和CSS无关。

修正后的完整代码 #

JavaScript

function eliminarDiv() {
  var div = document.querySelector(".al-login");
  
  div.parentNode.removeChild(div);
}

CSS

@import url('https://fonts.cdnfonts.com/css/insaniburger');
.al-login {
  width: 300px;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background: rgb(95, 184, 220);
  text-align: center;
  height: 70px;
  margin-top: 100px;
  margin-left: calc(50% - 150px);
  line-height: 0px;
}

.button-x {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-left: 267px;
  border-radius: 5px;
  background: rgb(135, 135, 135);
  border: 2px rgb(135, 135, 135);
}

.button-x .x-button {
  margin-top: 1px;
  margin-left: -1px;
  color: white;
  font-size: 14px;
  font-family: 'Insaniburger';
  text-transform: none;
}

HTML

<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<div class="al-login">
  <!--fas fa-eye fa-square-x-->
  <button class="button-x" onclick="eliminarDiv()"><p class="x-button">X</p></button>
  <p style="line-height: 0px; margin-top: 10px;">Dear user, you can login</p>
  <br style="line-height: 0px;">
</div>

额外优化建议 #

可以用更现代的写法简化代码，同时避免元素不存在时报错：

function eliminarDiv() {
  document.querySelector(".al-login")?.remove();
}

内容的提问来源于stack exchange，提问作者christian