Comment pourrais-je masquer le lien «Modifier» après l'avoir appuyé? et puis-je également masquer le texte "lorem ipsum" lorsque j'appuie sur modifier?

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

Vous pouvez également utiliser ce code pour afficher / masquer des éléments:

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

Remarque La différence entre style.visibilityet style.displayest lors de l'utilisation de la visibilité: masquée contrairement à l'affichage: aucune, la balise n'est pas visible, mais de l'espace lui est alloué sur la page. La balise est rendue, elle n'est tout simplement pas visible sur la page.

Voir ce lien pour voir les différences.

Je voudrais vous proposer l' option JQuery .

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

Par exemple:

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

Je suggérerais ceci pour cacher des éléments (comme d'autres l'ont suggéré):

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

Mais pour rendre les éléments visibles, je suggère ceci (au lieu de display = 'block'):

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

La raison en est que l'utilisation de display = 'block' provoque une marge / un espace supplémentaire à côté de l'élément rendu visible à la fois dans IE (11) et Chrome (Version 43.0.2357.130 m) sur la page sur laquelle je travaille.

Lorsque vous chargez une page pour la première fois dans Chrome, un élément sans attribut de style apparaîtra comme ceci dans l'inspecteur DOM:

element.style {
}

Le masquer à l'aide du JavaScript standard le fait comme prévu:

element.style {
  display: none;
}

Le rendre à nouveau visible en utilisant display = 'block' le change en ceci:

element.style {
  display: block;
}

Ce qui n'est pas le même qu'à l'origine. Cela pourrait très bien ne faire aucune différence dans la majorité des cas. Mais dans certains cas, cela introduit des anomalies.

L'utilisation de display = '' le ramène à son état d'origine dans l'inspecteur DOM, donc cela semble être la meilleure approche.

vous pouvez utiliser la propriété cachée de l'élément:

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

Vous devriez penser à JS pour le comportement et CSS pour les bonbons visuels autant que possible. En modifiant un peu votre code 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>

Vous pourrez passer d'une vue à l'autre en utilisant simplement les règles CSS:

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

Et le code JS qui bascule entre les deux classes

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

Bien que cette question ait reçu de nombreuses réponses auparavant, j'ai pensé que j'y ajouterais une réponse plus complète et plus solide pour les futurs utilisateurs. La réponse principale résout le problème, mais je pense qu'il vaut peut-être mieux connaître / comprendre les différentes façons de montrer / cacher les choses.

.

Modification de l'affichage à l'aide de css ()

C'est la façon dont je le faisais jusqu'à ce que je trouve certaines de ces autres façons.

Javascript:

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

Avantages:

• Masque et affiche. C'est à peu près ça.

Les inconvénients:

• Si vous utilisez l'attribut "display" pour autre chose, vous devrez coder en dur la valeur de ce qu'elle était avant de se cacher. Donc, si vous aviez "inline", vous devriez le faire $("#element_to_hid").css("display", "inline");sinon il reviendra par défaut à "block" ou quoi que ce soit d'autre dans lequel il sera forcé.
• Se prête aux fautes de frappe.

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

.

Modification de l'affichage à l'aide de addClass () / removeClass ()

Lors de la configuration de l'exemple pour celui-ci, j'ai rencontré des défauts sur cette méthode qui la rendent très peu fiable.

CSS / Javascript:

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

Avantages:

• Il se cache ... parfois. Reportez-vous à p1 sur l'exemple.
• Après avoir dévoilé, il reviendra à utiliser la valeur d'affichage précédente .... parfois. Reportez-vous à p1 sur l'exemple.
• Si vous voulez saisir tous les objets cachés, il vous suffit de le faire $(".hidden").

Les inconvénients:

• Ne se cache pas si la valeur d'affichage a été définie directement sur le html. Reportez-vous à la p2 sur l'exemple.
• Ne se cache pas si l'affichage est défini en javascript à l'aide de css (). Reportez-vous à la p3 sur l'exemple.
• Un peu plus de code car vous devez définir un attribut css.

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

.

Modification de l'affichage à l'aide de toggle ()

Javascript:

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

Avantages:

• Fonctionne toujours.
• Vous permet de ne pas avoir à vous soucier de l'état dans lequel il se trouvait avant le changement. L'utilisation évidente pour cela est pour un bouton à bascule ....
• Court et simple.

Les inconvénients:

• Si vous avez besoin de savoir dans quel état il passe pour faire quelque chose qui n'est pas directement lié, vous devrez ajouter plus de code (une instruction if) pour savoir dans quel état il se trouve.
• Semblable à la précédente, si vous souhaitez exécuter un ensemble d'instructions qui contient la bascule () dans le but de le masquer, mais vous ne savez pas s'il est déjà masqué, vous devez ajouter une vérification (une instruction if) pour le découvrir en premier et s'il est déjà masqué, sautez ensuite. Reportez-vous à la p1 de l'exemple.
• En relation avec les 2 inconvénients précédents, l'utilisation de toggle () pour quelque chose qui se cache ou s'affiche spécifiquement, peut être source de confusion pour les autres qui lisent votre code car ils ne savent pas de quelle manière ils vont basculer.

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

.

Modification de l'affichage à l'aide de hide () / show ()

Javascript:

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

Avantages:

• Fonctionne toujours.
• Après le dévoilement, il reviendra à l'utilisation de la valeur d'affichage précédente.
• Vous saurez toujours à quel état vous permutez afin que vous:
  1. vous n'avez pas besoin d'ajouter des instructions if pour vérifier la visibilité avant de changer d'état si l'état est important.
  2. ne confondra pas les autres personnes lisant votre code quant à l'état dans lequel vous passez si, si l'état est important.
• Intuitif.

Les inconvénients:

• Si vous souhaitez imiter une bascule, vous devrez d'abord vérifier l'état, puis passer à l'autre état. Utilisez plutôt toggle () pour ces derniers. Reportez-vous à la p2 de l'exemple.

Exemple: https://jsfiddle.net/k0ukhmfL/

.

Dans l'ensemble, je dirais que le mieux est de cacher () / afficher () sauf si vous en avez spécifiquement besoin pour être une bascule. J'espère que vous avez trouvé ces informations utiles.

Créez vous-même des méthodes de masquage et d'affichage pour tous les éléments, comme suit

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

Après cela, vous pouvez utiliser les méthodes avec les identifiants d'élément habituels comme dans ces exemples:

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

ou:

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

Je recommande Javascript, car il est relativement rapide et plus malléable.

    <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 vous l'utilisez dans un tableau, utilisez ceci: -

  <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 pour les classes et les ID

Par ID

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

Par classe (élément unique)

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

Par classe (plusieurs éléments)

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