fadeOut() parent element comes back

Question

I have a search function that has to hide the divs that don't match the search criteria.

HTML from elements

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

There are multiple of these divs that get loaded into the page. All these divs have the class .tfInput and get appended to the form with id "list".

HTML where the divs get loaded into

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

There is a search box with id "searchElement" and the search function gets called when a button is clicked or with a keyup() event in the search box.

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

Problem

The divs fadeout BUT they reappear within the same second.
They never stay hidden.
Anyone a solution?

Thx

Answer 1

It is fixed now.

I changed some css property because bootstrap didn't do what I expected.

That was the error that messed everything up.

My error? I changed the display property for all the divs to block !important and because of that they kept reappearing.

Thanks for all the input!