按下后如何隐藏“编辑”链接？当我按编辑时，我还可以隐藏“lorem ipsum”文本吗？
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>
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';
}<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>您还可以使用此代码来显示/隐藏元素：
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
注意style.visibility和之间的区别在于，style.display当使用visibility:hidden 与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 中加载一个页面时，一个没有 style 属性的元素将在 DOM 检查器中显示如下：
element.style {
}
正如预期的那样，使用标准 JavaScript 将其隐藏起来：
element.style {
display: none;
}
使用 display = 'block' 使其再次可见，将其更改为：
element.style {
display: block;
}
这和原来的不一样。在大多数情况下，这很可能不会产生任何影响。但在某些情况下，它确实会引入异常。
使用 display = '' 确实可以在 DOM 检查器中将其恢复到其原始状态，因此这似乎是更好的方法。
我想向您推荐JQuery选项。
$("#item").toggle();
$("#item").hide();
$("#item").show();
例如：
$(document).ready(function(){
$("#item").click(function(event){
//Your actions here
});
});
您可以使用元素的隐藏属性：
document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false