javascript - fadeOut() 父元素回来

Question

我有一个搜索功能，必须隐藏不符合搜索条件的 div。

来自元素的 HTML

<div class="form-group" id="number">
  <input class="form-control tfInput" id="tfInput1" type="text" value="test">
  <button type="button" class="btn btn-success" id="update1"> Save
  </button>
  <button type="button" class="btn btn-default" aria-label="Delete" id="delete1">Delete
  </button>
</div>

页面中加载了多个这样的 div。所有这些 div 都有类 .tfInput 并附加到 ID 为 "list" 的表单。

div 加载到的 HTML

<form class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text" id="searchElement" style="width: 200px" />
        <button type="button" class="btn btn-default" onclick="search()">search</button>
    </div>
</form>



<div class="container">
    <form class="form-inline" id="list"></form>
</div>

有一个 ID 为 "searchElement" 的搜索框，当单击按钮或搜索框中有 keyup() 事件时，将调用搜索函数。

Javascript

function search() {
  $.each($('#list .tfInput'), function(index, input) {
    if (new RegExp($('#searchElement').val().toUpperCase()).test(input.value.toUpperCase())) {
      $(input).parent().show();
    } else {
      $(input).parent().fadeOut();
    }
  })
};

问题

div 淡出但它们在同一秒内重新出现。
他们从不隐藏。
任何解决方案？

谢谢

Answer 1

现在已经修复了。

我更改了一些 css 属性，因为 bootstrap 没有按照我的预期进行。

就是这个错误把一切都搞砸了。

我的错误？我将所有 div 的 display 属性更改为 block !important 并且因此它们不断重新出现。

感谢所有的输入!