从弹出按钮中删除列表元素答案

【问题标题】：Delete list element from a pop up button从弹出按钮中删除列表元素
【发布时间】：2017-11-08 12:50:28
【问题描述】：

我正在尝试创建一个列表，当我单击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;
}

因此，如果单击第一个 li 和 id="wa" 模式出现，当我单击存档按钮时，li 和 id="wa" 应该消失（显示：无）。

【问题讨论】：

标签： javascript html css

【解决方案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>

就是这样

【讨论】：

嗨，@FeMachine，你能提供完整的 js 代码吗，我对 javascript 有点陌生。谢谢

【解决方案2】：

打开模态框时，将 id 保存在全局变量中，如

active_li = id_got;

当你点击存档你的 li 时，你会在你的方法中这样做：

function archive(){
    /*
    do your stuff
    */
    document.getElementById(active_li).style.display = 'none';           
}

【讨论】：