html - 单击时隐藏选定的元素或 DIV

Question

我正在寻找最简单的解决方案，但我似乎无法正确解决！

我尝试了多种组合，但似乎没有任何效果，这是我目前所拥有的：

<div id="hideme" onclick="hideme();">HIDE THIS DIV</div>

<script>
function hideme(this) {
this.parentNode.parentNode.style.display = 'none';
}
</script>

我想这样做，以便可以轻松隐藏不同的 div id

Answer 1

您只是错过了将上下文传递给 hideme：

<div id="hideme" onclick="hideme(this);">HIDE THIS DIV</div>

然后直接引用元素并将其设置display为none

function hideme(ele) {
    ele.style.display = 'none';
}

演示 - jsBin

Answer 2

以下是使用onclickhtml 属性的方法：

html:

<div id="hideme" onclick="hideme(this)">HIDE THIS DIV</div>

javascript:

function hideme(element) {
    element.style.display ="none";
};

jsFiddle _

---

有几种不同的方法可以做到这一点，这是另一种方法：

html:

<div id="hideme">HIDE THIS DIV</div>

javascript:

document.getElementById("hideme").addEventListener("click",
    function() {
        this.style.display ="none";
    }, false
);

这是jsFiddle

---

另一种方式：

html:

<div id="hideme">HIDE THIS DIV</div>

javascript:

document.getElementById("hideme").onclick = function() {
        document.getElementById("hideme").style.display ="none";
    };

而jsFiddle为此。