通过javascript隐藏div onclick答案

【问题标题】：Hide a div onclick through javascript通过javascript隐藏div onclick
【发布时间】：2017-10-18 07:43:45
【问题描述】：

我已经完成了在单击时显示 div 我想在另一次单击时删除的操作。我希望在再次单击时删除 div。

这是 HTML 代码

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript

 function showDiv() {
       document.getElementById('welcomeDiv').style.display = "block";
    }

【问题讨论】：

切换课程。
developer.mozilla.org/en-US/docs/Web/API/Element/classList
在提出关于 SO 的问题之前，请先做一些研究。
How to Toggle a div's visibility by using a button click的可能重复

标签： javascript html

【解决方案1】：

您必须检查 div 的可见性并基于此进行切换。

 function showDiv() {
    if( document.getElementById('welcomeDiv').style.display == "none") {
       document.getElementById('welcomeDiv').style.display = "block";
    }
    else {
       document.getElementById('welcomeDiv').style.display = "none"
    }
}

【讨论】：

【解决方案2】：

function showDiv() {
  var element = document.getElementById('welcomeDiv');
    if(!element.classList.contains('show')){
    element.classList.add('show');
    } else {
    element.classList.remove('show');
    }
       
       
 }

.show {
   display: block !important;
}

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

【讨论】：

【解决方案3】：

摆脱内联样式并使用类来切换显示类型。这更干净，您可以轻松地将其重用于其他元素。

function showDiv(element) {
  document.querySelector(element).classList.toggle("invisible");
}

.invisible {
  display: none;
}

<div id="welcomeDiv" class="answer_list invisible"> WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('#welcomeDiv')" />

【讨论】：

【解决方案4】：

检查 DIV 的当前可见性并让 javascript 函数进行相应的操作。

function showDiv() {
    if( document.getElementById('welcomeDiv').style.display == "none") {
       //If it is not visible, make it visible
       document.getElementById('welcomeDiv').style.display = "block";
    }
    else {
       //Else, make it invisible.
       document.getElementById('welcomeDiv').style.display = "none"
    }
}

【讨论】：