包含包含Javascript的div

Question

我正在尝试使用include开发过滤器功能。我现在已经可以过滤，但是现在的问题是，如果没有在字段中输入，背景色将不会消失。

例如，当我做完第一个过滤器后，背景色已经存在，但是第二次，即使字符与内容不匹配，背景色仍然保留在那里。

我已经插入了代码段，您可以尝试插入任何字符以查看结果，然后清除字段并再次单击搜索。

[如果有人能帮助我，将不胜感激。提前致谢。

function myFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  if (input.value !== '') {
    for (i = 0; i < nodes.length; i++) {
      if (nodes[i].innerText.toLowerCase().includes(filter)) {
        nodes[i].style.backgroundColor = "blue";
      } else {
        nodes[i].style.backgroundColor = "red";
      }
    }
  } else {
    return false;
  }
}

<table align="center" width="20%">
  <tr>
    <td style="padding-right: 10px">
      <input type="text" id="Search" title="Type in a name">
      <button onclick="myFunction()">
        Click to search
      </button>
    </td>
  </tr>
</table>
<br>
<div class="target">
  This is my DIV element.
</div>
<div class="target">
  This is another Div element.
</div>
<div class="target">
  Can you find me?
</div>

Answer 1

function myFunction() {
      var input = document.getElementById("Search");
      var filter = input.value.toLowerCase();
      var nodes = document.getElementsByClassName('target');
      for (i = 0; i < nodes.length; i++) {
        nodes[i].style.backgroundColor = "";
        if (input.value !== '') {
          if (nodes[i].innerText.toLowerCase().includes(filter)) {
            nodes[i].style.backgroundColor = "blue";
          } else {
            nodes[i].style.backgroundColor = "red";
          }
        }
      }

    }