Come posso nascondere il link "Modifica" dopo averlo premuto? e posso anche nascondere il testo "lorem ipsum" quando premo modifica?

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

Puoi anche usare questo codice per mostrare / nascondere elementi:

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

Nota La differenza tra style.visibilitye style.displayè quando si utilizza la visibilità: nascosto a differenza del display: nessuno, il tag non è visibile, ma lo spazio viene allocato sulla pagina. Il tag è reso, semplicemente non è visibile sulla pagina.

Vedi questo link per vedere le differenze.

Vorrei suggerirti l' opzione JQuery .

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

Per esempio:

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

Vorrei suggerire questo per nascondere elementi (come altri hanno suggerito):

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

Ma per rendere visibili gli elementi, suggerirei questo (anziché display = 'block'):

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

Il motivo è che l'uso di display = 'block' sta causando ulteriore margine / spazio bianco accanto all'elemento reso visibile in IE (11) e Chrome (Versione 43.0.2357.130 m) sulla pagina su cui sto lavorando.

Quando carichi per la prima volta una pagina in Chrome, un elemento senza un attributo di stile apparirà in questo modo nella finestra di ispezione DOM:

element.style {
}

Nasconderlo utilizzando lo standard JavaScript lo rende, come previsto:

element.style {
  display: none;
}

Renderlo nuovamente visibile usando display = 'block' lo cambia in questo modo:

element.style {
  display: block;
}

Che non è lo stesso di prima. Questo potrebbe benissimo non fare alcuna differenza nella maggior parte dei casi. Ma in alcuni casi, introduce anomalie.

L'uso di display = '' lo riporta allo stato originale nella finestra di ispezione DOM, quindi sembra l'approccio migliore.

puoi usare la proprietà nascosta di element:

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

Dovresti pensare a JS come comportamento e CSS come caramelle visive il più possibile. Modificando un po 'il tuo 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>

Sarai in grado di passare da una vista all'altra semplicemente usando le regole CSS:

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

E codice JS che passa tra le due classi

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

Sebbene a questa domanda sia stata data risposta molte volte in precedenza, ho pensato di aggiungere ad essa una risposta più completa e solida per i futuri utenti. La risposta principale risolve il problema, ma credo che potrebbe essere meglio conoscere / comprendere alcuni dei vari modi per mostrare / nascondere le cose.

.

Cambiare display usando css ()

Questo è il modo in cui lo facevo fino a quando non ho trovato alcuni di questi altri modi.

Javascript:

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

Professionisti:

• Nasconde e rivela. Questo è tutto.

Contro:

• Se usi l'attributo "display" per qualcos'altro, dovrai codificare il valore di quello che era prima di nascondersi. Quindi, se avessi "inline", dovresti farlo $("#element_to_hid").css("display", "inline");altrimenti tornerà di default a "block" o qualsiasi altra cosa in cui sarà forzato.
• Si presta a errori di battitura.

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

.

Modifica della visualizzazione mediante addClass () / removeClass ()

Durante l'impostazione dell'esempio per questo, in realtà ho riscontrato alcuni difetti su questo metodo che lo rendono molto inaffidabile.

CSS / Javascript:

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

Professionisti:

• Si nasconde .... a volte. Fare riferimento a p1 nell'esempio.
• Dopo aver scoperto, tornerà a utilizzare il valore di visualizzazione precedente .... a volte. Fare riferimento a p1 nell'esempio.
• Se vuoi prendere tutti gli oggetti nascosti, devi solo farlo $(".hidden").

Contro:

• Non si nasconde se il valore di visualizzazione è stato impostato direttamente sull'html. Fare riferimento a p2 nell'esempio.
• Non si nasconde se il display è impostato in javascript usando css (). Fare riferimento a p3 nell'esempio.
• Un po 'più di codice perché devi definire un attributo css.

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

.

Cambiare visualizzazione usando toggle ()

Javascript:

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

Professionisti:

• Funziona sempre
• Ti consente di non doverti preoccupare di quale stato fosse prima del passaggio. L'uso ovvio per questo è per un pulsante .... attiva / disattiva.
• Breve e semplice

Contro:

• Se hai bisogno di sapere a quale stato sta passando per fare qualcosa che non è direttamente correlato, dovrai aggiungere altro codice (un'istruzione if) per scoprire in quale stato si trova.
• Simile alla precedente con, se si desidera eseguire un set di istruzioni che contiene il toggle () allo scopo di nascondersi, ma non si sa se è già nascosto, è necessario aggiungere un segno di spunta (un'istruzione if) per scoprirlo prima e se è già nascosto, quindi salta. Fare riferimento a p1 dell'esempio.
• In relazione ai precedenti 2 contro, l'uso di toggle () per qualcosa che si nasconde o mostra in modo specifico, può essere fonte di confusione per gli altri che leggono il tuo codice in quanto non sanno in che modo commutare.

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

.

Cambiare visualizzazione usando hide () / show ()

Javascript:

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

Professionisti:

• Funziona sempre
• Dopo aver scoperto, tornerà a utilizzare il valore di visualizzazione precedente.
• Saprai sempre a quale stato stai scambiando in modo da:
  1. non è necessario aggiungere istruzioni if ​​per verificare la visibilità prima di modificare gli stati se lo stato è importante.
  2. non confonderà gli altri che leggono il tuo codice su quale stato stai passando se, se lo stato conta.
• Intuitivo.

Contro:

• Se vuoi imitare un interruttore, devi prima controllare lo stato e poi passare all'altro stato. Usa toggle () invece per questi. Fare riferimento a p2 dell'esempio.

Esempio: https://jsfiddle.net/k0ukhmfL/

.

Nel complesso, direi il meglio per essere hide () / show () a meno che non sia specificamente necessario che sia un interruttore. Spero che queste informazioni ti siano state utili.

Basta creare metodi Nascondi e Mostra per tutti gli elementi, come segue

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

Dopodiché puoi usare i metodi con i soliti identificatori di elementi come in questi esempi:

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

o:

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

Raccomando Javascript, perché è relativamente veloce e più malleabile.

    <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 lo stai usando in una tabella usa questo: -

  <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 per Classi e ID

Per ID

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

Per classe (elemento singolo)

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

Per classe (elementi multipli)

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