[FIXED] When executing the createModalAddPost() function, a window opens, but only once

Issue

a question about js, I have a panel that causes the window to open, it works, but when I close the window and try to open it again, it doesn't work, you need to reload the page, you need to be able to open the window again after clicking close, thanks in advance

<admin class="admin">
    <div onclick="createModalAddPost()" class="admin-btn"><i class="fas fa-plus"></i></div>
    <div class="admin-btn"><i class="fas fa-plus"></i></div>
</admin>

<!--Modal window-->
<div class="bgPage blog" >
    <div class="admin-add">
        <form action="">
            <label for="">Заполните данные поста</label>
            <input type="text" placeholder="Введите название поста">
            <textarea name="" id="" placeholder="Введите текст поста"></textarea>
            <input type="file" accept="image/*" multiple onchange="changeImages(this)">
            <div class="image-check"></div>
            <div class="pre-order__button blog-bt">Создать</div>
        </form>
    </div>
</div>

function createModalAddPost() {
    
    let form = document.querySelector(".admin-add");
    if(!form){
        console.warn("Элемент [.admin-add] не найден");
        return;
    }
    let closeMain = document.createElement("i");
    closeMain.classList.add("fas", "fa-times");
    closeMain.onclick = function () {
        this.parentElement.parentElement.remove();
    };

    let blog = document.querySelector(".blog");
    blog.classList.add("visual");
   

    if (form.append(closeMain)) {
        window.parent.location = window.parent.location.href;
    }
}

.visual {
    display:flex; 
    justify-content: center; 
    align-items: center;
    display: block;
}


.blog {
    display:flex; 
    justify-content: center; 
    align-items: center;
    display: none;
}

Solution

The onClick event associated to a method wich removes the modal from the DOM as we can tell with this.parentElement.parentElement.remove(). So you cannot add it anymore when calling the method again.

To show and close modals, what I recommend you doing is switching the display value of your element, from display: none to display: flex (or whatever).

Answered By - Alexis

Answer Checked By - David Marino (PHPFixing Volunteer)