Javascript 输入为空时隐藏div

当输入元素为空时（用户没有键入任何内容），我需要隐藏一个div。我已经试过了，但它们对我不起作用。我要隐藏的div的id为

search result container

，输入的id为

search input

输入为空时，我需要隐藏div。

以下是我的HTML代码的相关部分：

 <!-- Html Elements for Search -->
<div id="search-container">
  <input type="text" name="search-input" id="search-input" placeholder="&#128270; type to search...">

  <h1></h1>
  <h1></h1>
  <h1></h1>
</div>
</div>

<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

<div class="container" id="search-result-container" class="show_hide">

  <ul id="results-container"></ul>

  <!-- Script pointing to search-script.js -->
  <script src=[SEARCH JS]></script>

  <!-- Configuration -->


  <script>
    SimpleJekyllSearch({
      searchInput: document.getElementById('search-input'),
      resultsContainer: document.getElementById('results-container'),
      searchResultTemplate: '<a href="{url}"><h1>{title}</h1></a><h2 class="searchresults">{date}</span></h2>',
      json: [JSON URL]
    })
  </script>

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




</div>
</div>

单纯形搜索({
searchInput:document.getElementById（'search-input'），
resultcontainer:document.getElementById（'results-container'），
searchResultTemplate:“{date}”，
json:[json URL]
})

---

我们将非常感谢您的帮助，提前感谢您。

下面是一个非常简单的方法，可以使用jquery实现您想要的功能：

$（'search input'）。在（'input'，function（）上{
$（“#搜索结果容器”）.css（'display'，$（this.val（）！='''block'：'none'）
});
#搜索结果容器{
显示：无；
}

这将被隐藏
下面是一种非常简单的方法，可以使用jquery执行您想要的操作：


$（'search input'）。在（'input'，function（）上{
$（“#搜索结果容器”）.css（'display'，$（this.val（）！='''block'：'none'）
});
#搜索结果容器{
显示：无；
}

这将根据您发布的两个链接隐藏
：
HTML:

JS:

基于您发布的两个链接：
HTML:

JS:

使用以下方法：

<script>
    // Your div id which you wants to hide
    var hide = document.getElementById("yourDivId"); 
   
    //Your input field id
    var textarea = document.getElementById("YourInputFieldId");

    //Simple Logic
    if (textarea.value == "") {
        hide.style.display = "none";
    }
</script>


//您要隐藏的div id
var hide=document.getElementById（“yourDivId”）；
//您的输入字段id
var textarea=document.getElementById（“YourInputFieldId”）；
//简单逻辑
如果（textarea.value==“”）{
hide.style.display=“无”；
}
使用以下方法：

<script>
    // Your div id which you wants to hide
    var hide = document.getElementById("yourDivId"); 
   
    //Your input field id
    var textarea = document.getElementById("YourInputFieldId");

    //Simple Logic
    if (textarea.value == "") {
        hide.style.display = "none";
    }
</script>


//您要隐藏的div id
var hide=document.getElementById（“yourDivId”）；
//您的输入字段id
var textarea=document.getElementById（“YourInputFieldId”）；
//简单逻辑
如果（textarea.value==“”）{
hide.style.display=“无”；
}
请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅页面以获取澄清此问题的帮助。您可能应该在使用JQuery的任何脚本（如果在search script.js中使用）之前加载JQuery脚本。Gerado BLANCO请参阅我的编辑（粗体）请在您的问题中显示您试图用于解决问题的逻辑，但该逻辑不起作用。请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅页面以获取澄清此问题的帮助。您可能应该在使用JQuery的任何脚本（如果在search script.js中使用）之前加载JQuery脚本。Gerado BLANCO请参阅我的编辑（粗体）请在您的问题中显示您试图用于解决问题的逻辑，但该逻辑不起作用。这是否会干扰我的其他JS，其中包含搜索脚本.JS？通过阅读，您是否阅读了我发送的链接？你需要在脚本之前包含它。这会干扰我的另一个包含搜索脚本.JS的JS吗？通过阅读，你是否阅读了我发送的链接？您需要在脚本之前包含它。
$('#search-input')
    .on('keyup', function(e) {
    var input = $(this).val();
    input.length ?
            $('#search-result-container').show() :
      $('#search-result-container').hide();
  })

<script>
    // Your div id which you wants to hide
    var hide = document.getElementById("yourDivId"); 
   
    //Your input field id
    var textarea = document.getElementById("YourInputFieldId");

    //Simple Logic
    if (textarea.value == "") {
        hide.style.display = "none";
    }
</script>