Como eu poderia ocultar o link 'Editar' depois de pressioná-lo? e também posso ocultar o texto "lorem ipsum" ao pressionar editar?

<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>

Você também pode usar este código para mostrar / ocultar elementos:

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

Nota A diferença entre style.visibilitye style.displayestá ao usar a visibilidade: oculta ao contrário da exibição: nenhuma, a tag não está visível, mas o espaço é alocado na página. A tag é renderizada, mas não é vista na página.

Veja este link para ver as diferenças.

Gostaria de sugerir a opção JQuery .

$("#item").toggle();
$("#item").hide();
$("#item").show();

Por exemplo:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Eu sugeriria isso para ocultar elementos (como outros sugeriram):

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

Mas, para tornar os elementos visíveis, sugiro isso (em vez de display = 'block'):

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

O motivo é que o uso de display = 'block' está causando margem / espaço em branco adicional ao lado do elemento que está sendo visível no IE (11) e no Chrome (versão 43.0.2357.130 m) na página em que estou trabalhando.

Quando você carrega uma página no Chrome pela primeira vez, um elemento sem um atributo de estilo aparecerá assim no inspetor DOM:

element.style {
}

Escondê-lo usando o JavaScript padrão o torna como esperado:

element.style {
  display: none;
}

Torná-lo visível novamente usando display = 'block' altera para este:

element.style {
  display: block;
}

O que não é o mesmo que era originalmente. Isso pode muito bem não fazer diferença na maioria dos casos. Mas, em alguns casos, isso introduz anormalidades.

O uso de display = '' restaura seu estado original no inspetor DOM, portanto parece a melhor abordagem.

você pode usar a propriedade oculta do elemento:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

Você deve pensar em JS para comportamento e CSS para visual candy o máximo possível. Alterando um pouco o seu HTML:

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

Você poderá alternar de uma visualização para outra usando as regras CSS:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

E código JS que alterna entre as duas classes

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Embora essa pergunta tenha sido respondida várias vezes antes, pensei em adicionar uma resposta mais completa e sólida para futuros usuários. A resposta principal resolve o problema, mas acredito que talvez seja melhor conhecer / entender algumas das várias maneiras de mostrar / ocultar as coisas.

.

Alterando a exibição usando css ()

Era assim que costumava fazer até encontrar algumas dessas outras maneiras.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Prós:

• Esconde e esconde. É sobre isso.

Contras:

• Se você usar o atributo "display" para outra coisa, precisará codificar o valor do que era antes de ocultar. Então, se você tivesse "inline", teria que fazer$("#element_to_hid").css("display", "inline"); contrário, voltará a "bloquear" ou o que mais for forçado.
• Presta-se a erros de digitação.

Exemplo: https://jsfiddle.net/4chd6e5r/1/

.

Alterando a exibição usando addClass () / removeClass ()

Ao configurar o exemplo para este, de fato encontrei algumas falhas nesse método que o tornam muito pouco confiável.

Css / Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Prós:

• Esconde .... às vezes. Consulte a p1 no exemplo.
• Depois de mostrar, ele voltará a usar o valor de exibição anterior .... às vezes. Consulte a p1 no exemplo.
• Se você quiser pegar todos os objetos ocultos, basta fazê-lo $(".hidden").

Contras:

• Não oculta se o valor de exibição foi definido diretamente no html. Consulte p2 no exemplo.
• Não oculta se a exibição estiver definida em javascript usando css (). Consulte a página 3 no exemplo.
• Um pouco mais de código porque você precisa definir um atributo css.

Exemplo: https://jsfiddle.net/476oha8t/8/

.

Alterando a exibição usando alternar ()

Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

Prós:

• Sempre funciona.
• Permite que você não precise se preocupar com o estado anterior à mudança. O uso óbvio para isso é para um botão .... alternar.
• Curto e simples.

Contras:

• Se você precisar saber em qual estado ele está alternando para fazer algo não diretamente relacionado, será necessário adicionar mais código (uma instrução if) para descobrir em que estado está.
• Semelhante ao con anterior, se você deseja executar um conjunto de instruções que contém o toggle () com o objetivo de ocultar, mas não sabe se ele já está oculto, é necessário adicionar uma verificação (uma instrução if) para descobrir primeiro e se já estiver oculto, pule. Consulte a p1 do exemplo.
• Relacionado com os 2 contras anteriores, usar toggle () para algo que está oculto ou exibido especificamente pode ser confuso para outras pessoas que leem seu código, pois não sabem para que lado irão alternar.

Exemplo: https://jsfiddle.net/cxcawkyk/1/

.

Alterando a exibição usando hide () / show ()

Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Prós:

• Sempre funciona.
• Depois de mostrar, ele voltará a usar o valor de exibição anterior.
• Você sempre saberá em qual estado está trocando, para que:
  1. não é necessário adicionar instruções if para verificar a visibilidade antes de alterar os estados, se o estado for importante.
  2. não confundirá outras pessoas que leem seu código sobre o estado para o qual você está mudando, se o estado é importante.
• Intuitivo.

Contras:

• Se você deseja imitar uma alternância, primeiro verifique o estado e depois mude para o outro estado. Use alternar () em vez disso. Consulte a p2 do exemplo.

Exemplo: https://jsfiddle.net/k0ukhmfL/

.

No geral, eu diria que o melhor é hide () / show (), a menos que você precise especificamente que seja uma alternância. Espero que você tenha achado essas informações úteis.

Basta criar métodos de ocultar e mostrar para todos os elementos, da seguinte maneira

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

Após isso, você pode usar os métodos com os identificadores de elementos comuns, como nestes exemplos:

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

ou:

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

Eu recomendo o Javascript, porque é relativamente rápido e mais maleável.

    <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>

Se você o estiver usando em uma tabela, use o seguinte: -

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // 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>

JS baunilha para classes e IDs

Por ID

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

Por classe (elemento único)

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

Por classe (vários elementos)

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