我建议这样隐藏元素(就像其他人建议的那样):

document.getElementById(id).style.display = 'none';

但是为了让元素可见，我建议这样做(而不是display = 'block'):

document.getElementById(id).style.display = '';

原因是使用display = 'block'会导致在IE(11)和Chrome(版本43.0.2357.130 m)中都可见的元素旁边出现额外的空白/空白。

当你第一次在Chrome中加载一个页面时，一个没有样式属性的元素会像这样出现在DOM检查器中:

element.style {
}

使用标准JavaScript隐藏它使它像预期的那样:

element.style {
  display: none;
}

使用display = 'block'使其再次可见，将其更改为:

element.style {
  display: block;
}

这和原来不一样了。在大多数情况下，这可能不会有任何不同。但在某些情况下，它确实会引起异常。

使用display = "确实会将它恢复到DOM检查器中的原始状态，因此这似乎是更好的方法。

类和id的香草JS

通过ID

document.querySelector('#element-id').style.display = 'none';

按类别(单个元素)

document.querySelector('.element-class-name').style.display = 'none';

按类别(多个元素)

for (const elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}

我建议这样隐藏元素(就像其他人建议的那样):

document.getElementById(id).style.display = 'none';

但是为了让元素可见，我建议这样做(而不是display = 'block'):

document.getElementById(id).style.display = '';

原因是使用display = 'block'会导致在IE(11)和Chrome(版本43.0.2357.130 m)中都可见的元素旁边出现额外的空白/空白。

当你第一次在Chrome中加载一个页面时，一个没有样式属性的元素会像这样出现在DOM检查器中:

element.style {
}

使用标准JavaScript隐藏它使它像预期的那样:

element.style {
  display: none;
}

使用display = 'block'使其再次可见，将其更改为:

element.style {
  display: block;
}

这和原来不一样了。在大多数情况下，这可能不会有任何不同。但在某些情况下，它确实会引起异常。

使用display = "确实会将它恢复到DOM检查器中的原始状态，因此这似乎是更好的方法。

我推荐Javascript，因为它相对较快，可塑性更强。

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

只需为所有元素自己创建隐藏和显示方法，如下所示

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

在此之后，您可以使用通常的元素标识符的方法，如以下示例:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

or:

<img src="removeME.png" onclick="this.hide()">

你也可以使用这段代码来显示/隐藏元素:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

注意风格的区别。可见性和风格。显示是 当使用visibility:hidden与display:none不同时，标签是不可见的，但是在页面上为它分配了空间。标签被渲染，只是在页面上看不到。

请参见此链接查看区别。