[Alexander3928]

Добрый день. Есть div который создается при нажании на кнопку, потом добовляются стили через секунду. Когда удаляю этот div с помощью removeChild, все окей по логике, но когда я повторно нажимаю на кнопку которая создает этот div, он не создается. Может я забыл что-то указать для этого?

<div class="div">
      <button class="button" id="butt">open modal</button>
    </div>

CSS

body {
    background-color: rgba(232, 169, 10, 0.357);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.button {
    border: none;
    background: none;
    border-radius: 10px;
    border: 5px solid red;
    font-size: 30px;
}

.modal {
    width: 500px;
    height: 350px;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(22, 232, 40, 0.618);
}

.container {
    height: 100%;
}

.content {
    height: 100%;
}

.div {
    width: 70%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

._active {
    opacity: 1;
    visibility: visible;
}

const div = document.querySelector(".div");
const butt = document.querySelector(".button");

butt.addEventListener("click", () => {

  function modal() {
    let obj_modal = "";
    obj_modal = `
            <div class="modal">
                <div class="container">
                    <img src="./game_project_web/src/IMG/blog-image/Layer 38.jpg" alt="" class="content">
                    <button class="button_modal">CLOSE</button>
                </div>
            </div>
        `;
    div.innerHTML += obj_modal;
  }
  modal(document.querySelector(".div"));

  function active_class() {
    const modal_over = document.querySelector(".modal");
    modal_over.classList.add("_active");
  }
  setTimeout(active_class, 1000)

  const modal_close = document.querySelector(".button_modal");
  const modal_over = document.querySelector(".modal")
  modal_close.addEventListener("click", () => {
    modal_over.classList.remove("_active");
    function close_modal() {
      div.removeChild(modal_over);
    }
    setTimeout(close_modal, 2000);
  });
});