¿Cómo podría ocultar el enlace 'Editar' después de presionarlo? y también puedo ocultar el texto "lorem ipsum" cuando presiono 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>

También puede usar este código para mostrar / ocultar elementos:

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

Nota La diferencia entre style.visibilityy style.displayes cuando se usa la visibilidad: oculta a diferencia de la pantalla: ninguna, la etiqueta no es visible, pero se le asigna espacio en la página. La etiqueta se representa, simplemente no se ve en la página.

Vea este enlace para ver las diferencias.

Me gustaría sugerirle la opción JQuery .

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

Por ejemplo:

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

Sugeriría esto para ocultar elementos (como otros han sugerido):

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

Pero para hacer que los elementos sean visibles, sugeriría esto (en lugar de display = 'block'):

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

La razón es que usar display = 'block' está causando un margen / espacio en blanco adicional al lado del elemento que se hace visible tanto en IE (11) como en Chrome (Versión 43.0.2357.130 m) en la página en la que estoy trabajando.

Cuando cargue por primera vez una página en Chrome, un elemento sin un atributo de estilo aparecerá así en el inspector DOM:

element.style {
}

Ocultarlo usando el JavaScript estándar lo convierte en esto, como se esperaba:

element.style {
  display: none;
}

Hacerlo visible nuevamente usando display = 'block' lo cambia a esto:

element.style {
  display: block;
}

Lo cual no es lo mismo que era originalmente. Es muy posible que esto no haga ninguna diferencia en la mayoría de los casos. Pero en algunos casos, introduce anormalidades.

El uso de display = '' lo restaura a su estado original en el inspector DOM, por lo que parece el mejor enfoque.

puede usar la propiedad oculta del elemento:

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

Debería pensar en JS para el comportamiento y CSS para visual candy tanto como sea posible. Al cambiar un poco tu 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>

Podrá cambiar de una vista a otra simplemente usando reglas CSS:

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

Y el código JS que cambia entre las dos clases

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

Aunque esta pregunta ha sido respondida muchas veces antes, pensé agregarle una respuesta más completa y sólida para futuros usuarios. La respuesta principal resuelve el problema, pero creo que puede ser mejor conocer / comprender algunas de las diversas formas de mostrar / ocultar cosas.

.

Cambio de pantalla usando css ()

Esta es la forma en que solía hacerlo hasta que encontré algunas de estas otras formas.

Javascript:

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

Pros:

• Se esconde y se esconde. Eso es todo.

Contras:

• Si usa el atributo "display" para otra cosa, tendrá que codificar el valor de lo que era antes de ocultarse. Por lo tanto, si tuviera "en línea", tendría que hacerlo de lo $("#element_to_hid").css("display", "inline");contrario, volverá a "bloquear" o cualquier otra cosa en la que se verá obligado.
• Se presta a errores tipográficos.

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

.

Cambio de visualización usando addClass () / removeClass ()

Al configurar el ejemplo para este, en realidad me encontré con algunos defectos en este método que lo hacen muy poco confiable.

CSS / Javascript:

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

Pros:

• Se esconde ... a veces. Consulte la p1 en el ejemplo.
• Después de mostrar, volverá a utilizar el valor de visualización anterior ... a veces. Consulte la p1 en el ejemplo.
• Si quieres agarrar todos los objetos ocultos, solo tienes que hacerlo $(".hidden").

Contras:

• No se oculta si el valor de visualización se configuró directamente en el html. Consulte la p2 en el ejemplo.
• No se oculta si la pantalla está configurada en javascript usando css (). Consulte la p3 en el ejemplo.
• Un poco más de código porque tienes que definir un atributo css.

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

.

Cambio de pantalla usando alternar ()

Javascript:

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

Pros:

• Siempre funciona
• Le permite no tener que preocuparse de qué estado era antes de cambiar. El uso obvio para esto es para un ... botón de alternar.
• Corto y simple.

Contras:

• Si necesita saber a qué estado está cambiando para hacer algo que no esté directamente relacionado, deberá agregar más código (una instrucción if) para averiguar en qué estado se encuentra.
• Similar a la estafa anterior, si desea ejecutar un conjunto de instrucciones que contiene el alternar () con el propósito de ocultar, pero no sabe si ya está oculto, debe agregar un cheque (una declaración if) para averiguarlo primero y si ya está oculto, omita. Consulte la p1 del ejemplo.
• En relación con las 2 desventajas anteriores, usar toggle () para algo que se oculta o muestra específicamente, puede ser confuso para los demás que leen su código, ya que no saben de qué manera alternarán.

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

.

Cambiar la visualización usando hide () / show ()

Javascript:

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

Pros:

• Siempre funciona
• Después de mostrar, volverá a usar el valor de visualización anterior.
• Siempre sabrá a qué estado está cambiando para que:
  1. no es necesario agregar declaraciones if para verificar la visibilidad antes de cambiar estados si el estado importa.
  2. no confundirá a otras personas que lean su código en cuanto a qué estado está cambiando si, si el estado importa.
• Intuitivo.

Contras:

• Si desea imitar una palanca, primero deberá verificar el estado y luego cambiar al otro estado. Utilice toggle () en su lugar para estos. Consulte la p2 del ejemplo.

Ejemplo: https://jsfiddle.net/k0ukhmfL/

.

En general, diría que lo mejor es hide () / show () a menos que lo necesites específicamente para alternar. Espero que hayas encontrado útil esta información.

Simplemente cree métodos de ocultar y mostrar usted mismo para todos los elementos, de la siguiente manera

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

Después de esto, puede usar los métodos con los identificadores de elementos habituales como en estos ejemplos:

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

o:

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

Recomiendo Javascript, porque es relativamente rápido y más maleable.

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

Si lo está utilizando en una tabla, use esto: -

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

Vanilla JS para clases e identificaciones

Por ID

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

Por clase (elemento único)

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

Por clase (elementos múltiples)

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