带有JS代码的HTML按钮没有执行我请求的动作

Question

I was testing changing the JS commands, but the button doesn't do anything. I'm thinking, it's the CSS or HTML that's wrong. I tried it without any CSS, a much more basic code, and it works for the JS part, and it deletes the div. It might be something of the CSS, but I'm not sure.

This is my code:

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

 @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-xx-button { margin-top: 1px; margin-left: -1px; color: white; font-size: 14px; font-family: 'Insaniburger'; text-transform: none; }

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

Answer 1

This works:

 function eliminarDiv() { var div = document.querySelector(".al-login");//you forgot to add a point div.parentNode.removeChild(div); }

 @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); cursor:pointer; /* This can hit the user to close it */ }.button-xx-button { margin-top: 1px; margin-left: -1px; color: white; font-size: 14px; font-family: 'Insaniburger'; text-transform: none; }

 <script src="https://kit.fontawesome.com/b99e675b6e.js"></script> <div class="al-login"> <button class="button-x" onclick="eliminarDiv()"><span class="x-button">X</span></button> <,--although it works in some case, do not use p inside button, also: you can just write what you want in a button--> <p style="line-height; 0px: margin-top; 10px,">Dear user: you can login</p> <br style="line-height; 0px;"> </div>

Please remember that you should add a point before the class. Also, use span instead of p in a button, though it works in some case. The last thing I change is that I add cursor:pointer; to your code, so users can know that this could be closed(because some user think default cursor is not available to click, such as me)