javascript - 从弹出按钮中删除列表元素

Question

我正在尝试创建一个列表，当我在其中单击 li 元素时，会弹出一个模式，它有一个存档按钮。因此，当我单击该按钮时，模态来自的特定 li 消失了(显示:无)。以下是我的代码 -

列表

<ul>
    <li id="wa" onclick="openModal(this.id)"> List one</li>
    <li id="wb" onclick="openModal(this.id)"> List two</li>
</ul>

模态窗口(当我点击列表时出现这个模态窗口，不包括这个模态的 css)-

<div class="modal" id="modal">
    <div class="modal_content" id="modal_content">
        <div class="m_header"><p id="m_header_title"></p> <span class="close" onclick="document.getElementById('modal').style.display = 'none'">&#x2715;</span></div>
        <div class="m_footer">
                <button class="archive" onclick="archive()">Archive</button>
        </div>
    </div>
</div>

这是模态打开的 JS -

function openModal(id_got){
    var modalOpen = document.getElementById('modal');
    modalOpen.style.display = "block";
    var i = id_got;
    var getId = this.document.getElementById(i);
    var modalHeader = this.document.getElementById('m_header_title');
    modalHeader.innerHTML = getId.innerHTML;
}

因此，如果单击带有 id="wa" 的第一个 li 模式出现，当我单击存档按钮时，li id="wa" 应该消失(显示:无)。

Answer 1

在openModal上将当前打开的元素id保存在一个全局变量中

currentOpened = id_got;

然后为关闭事件创建一个处理程序

var currentOpened; // global variable

function openModal(id_got){
    var modalOpen = document.getElementById('modal');
    modalOpen.style.display = "block";
    var i = id_got;
    currentOpened = id_got; // here's the add
    var getId = this.document.getElementById(i);
    var modalHeader = this.document.getElementById('m_header_title');
    modalHeader.innerHTML = getId.innerHTML;
}

function onModalClose() {
    document.getElementById(currentOpened).style.display = 'none;
}

而模态 html

<div class="modal" id="modal">
    <div class="modal_content" id="modal_content">
        <div class="m_header"><p id="m_header_title"></p> <span class="close" onclick="onModalClose()">&#x2715;
    </span></div>
        <div class="m_footer">
            <button class="archive" onclick="archive()">Archive</button>
        </div>
    </div>
</div>

就是这样