Wie versteckt man dieses Textfeld?

Question

Ich habe einige Tauchgänge erstellt und möchte, wenn Benutzer klicken Sie auf <span class="rp-r" style=""><i class="fa fa-reply"></i></span> Dieser Textbereich <textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea> Verbergen.

<div class="reply-cm" style="display: block;"> 
 
    <textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea> 
 
    <button onclick="reply(6)" class="btn">Reply</button> 
 
    <div id="reply6"> 
 
     <div class="replyes"> 
 
      <span class="rp-r" style="">Hide</span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

verwenden Javascript

<script> 
    function hide_rpr(y) { 

      var x = document.getElementById(y); 

       x.style.display = 'none'; 
     } 
    </script> 

dann

<span class="rp-r" onclick="hide_rpr(<?php echo $idexample ?>)" style="">Hide</span> 

Answer 2

<div class="reply-cm" style="display: block;"> 
 
    <textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea> 
 
<button onclick="reply(6)" class="btn">Reply</button> 
 
    <div id="reply6"> 
 
      <div class="replyes"> 
 
      <span class="rp-r" style="" onclick="document.getElementById('text6').style.display='none'">Hide</span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Demo

document.getElementById('hide').onclick = function hideStuff() { 
    if(document.getElementById('text6').style.display == 'none'){ 
     document.getElementById('text6').style.display = ''; 
     document.getElementById('hide').innerHTML = "Hide"; 
    } else { 
     document.getElementById('text6').style.display = 'none'; 
     document.getElementById('hide').innerHTML = "Show"; 
    } 
} 

Answer 4

Am besten ist es, das Element über eine CSS-Klasse zu verstecken. Wenn Sie das tun, können Sie es beliebig verstecken. With display:none (0 nicht empfohlen), visibility:hidden ...

Wenn Sie Inline-Stile direkt manipulieren, wie andere Antworten vorschlagen, würde Ihr Layout von JavaScript abhängen, was meiner Meinung nach schlecht ist. Ich denke, es ist am besten, wenn JavaScript mit Logik und CSS mit Stilen arbeitet.

---

Dieser Code sucht alle Elemente mit Klasse reply-cm und findet alle Elemente mit Klasse js-hideinnerhalb von ihnen. Dann fügt es allen js-hide Elementen einen click Ereignis-Listener hinzu, in dem sie ihre jeweiligen reply-cm Elemente verstecken.

function bindHide(target, trigger) { 
 
    trigger.addEventListener("click", function() { 
 
    target.classList.add("is-hidden"); 
 
    }); 
 
} 
 

 
function bindHideEvents() { 
 
    var replies = document.getElementsByClassName("reply-cm"); 
 

 
    for (var i = 0; i < replies.length; i++) { 
 
    var buttons = replies[i].getElementsByClassName("js-hide"); 
 

 
    for (var i2 = 0; i2 < buttons.length; i2++) { 
 
     bindHide(replies[i], buttons[i]); 
 
    } 
 
    } 
 
} 
 

 
bindHideEvents();

.is-hidden { 
 
    display: none; 
 
}

<div class="reply-cm"> 
 
    <textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea> 
 
    <button onclick="reply(6)" class="btn">Reply</button> 
 
    <div id="reply6"> 
 
     <div class="replyes"> 
 
      <span class="rp-r js-hide">Hide</span> 
 
     </div> 
 
    </div> 
 
</div>

Hier ist eine Lösung mit jQuery:

$(".js-hide").click(function (e) { 
 
    $(this).closest(".reply-cm").addClass("is-hidden"); 
 
});

.is-hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="reply-cm"> 
 
    <textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea> 
 
    <button onclick="reply(6)" class="btn">Reply</button> 
 
    <div id="reply6"> 
 
     <div class="replyes"> 
 
      <span class="rp-r js-hide">Hide</span> 
 
     </div> 
 
    </div> 
 
</div>