JavaScript-Element ausblenden/einblenden

Question

Wie kann ich den "Bearbeiten"-Link ausblenden, nachdem ich ihn gedrückt habe? und kann ich auch den "lorem ipsum"-Text ausblenden, wenn ich "Bearbeiten" drücke?

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

Answer 1

Vanilla JS für Klassen und IDs

Nach ID

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

Nach Klasse (Einzelelement)

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

Nach Klasse (Mehrere Elemente)

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

Answer 2

Sie sollten JS für das Verhalten und CSS für das visuelle Bonbon so weit wie möglich denken. Indem Sie Ihr HTML ein wenig ändern:

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

Sie können von einer Ansicht zur anderen wechseln, indem Sie einfach CSS-Regeln verwenden:

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

Und JS-Code, der zwischen den beiden Klassen umschaltet

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

Answer 3

Erstellen Sie einfach selbst Ausblend- und Einblendmethoden für alle Elemente, wie folgt

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

Danach können Sie die Methoden mit den üblichen Elementbezeichnungen wie in diesen Beispielen verwenden:

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

oder:

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

Answer 4

Wenn Sie es in einer Tabelle benutzen Sie dies :-

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

Answer 5

Ich empfehle Javascript, weil es relativ schnell und anpassungsfähiger ist.

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