如何隐藏这个Textarea？

Question

我创建了一些潜水，我希望当用户点击<span class="rp-r" style=""><i class="fa fa-reply"></i></span>此文本区域<textarea id="text6" class="reply" name="reply" placeholder="Type Your Reply Here"></textarea>隐藏时

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用javascript

  <script>
     function hide_rpr(y) {

            var x = document.getElementById(y);

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

然后

 <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

最好通过CSS类隐藏元素。如果你这样做，你可以任意方式隐藏它。使用display:none，position:absolute; left:-10000px;（不推荐），visibility:hidden ...

如果你像其他答案建议的那样直接操作内联样式，你的布局将取决于JavaScript，这在我看来是不好的。我认为最好是JavaScript处理逻辑和CSS处理样式。

此代码搜索具有类reply-cm的所有元素，并查找其中} 类的所有元素。然后，它会向js-hide个元素添加一个click事件监听器，用于隐藏各自的js-hide元素。

reply-cm

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

以下是jQuery的解决方案：

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

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

.is-hidden {
  display: none;
}