Why isn't the element display property being redefined?

The problem is that div element with class layer is being added to the DOM, but not being displayed, regardless, I’ve set display property to flex to class layer

    $("#elem").click(function(e) {
            if (e.target.classList.contains("myClass")) {
                $("*").hide();
                $("body").prepend(`<div class="layer">Hey!</div>`);
            }
  });
.layer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(55, 55, 55);
    height: 100vh;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="elem" class="myClass">click me</div>

108 thoughts on “Why isn't the element display property being redefined?”

Leave a Comment