title: How to filter a list and then remove the results from it, using javascript
body: <p>I have a list that I'm trying to filter, and then remove the filtered results. I found a ready made solution for the filtering in w3schools, but I'm having trouble with removing lines.</p>
  
  <p>My html is here:</p>
  
  <pre><code>&lt;body&gt;
      &lt;ul id="project-list"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Please please me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;With the Beatles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;A Hard Day's Night&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Beatles for Sale&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help!&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Rubber Soul&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Revolver&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sgt. Pepper's Lonely Hearts Club Band&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;The Beatles (The White Album)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Yellow Submarine&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Abbey Road&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Let It Be&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div data-role="footer" class="ui-grid-a" data-position="fixed"&gt;
  
          &lt;div id="myNavbar" data-role="navbar" class="navbar"&gt;
              &lt;div class="ui-block-a" style="width:auto"&gt;
                  &lt;button id="remove" onclick="listDelete"&gt;Remove&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;script&gt;
              $("button").click(function () {
                  $("li").remove(":contains('Beatles')");
              });
              &lt;/script&gt;
  
              &lt;div class="ui-block-b" style="width:70%"&gt;
                  &lt;input type="text" id="search-input" onkeyup="listFilter()" placeholder="Filter list..."&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--/footer--&gt;
  </code></pre>
  
  <hr>
  
  <p>The filtering function is this</p>
  
  <pre><code>function listFilter() {
  // Declare variables
  var input, filter, ul, li, a, i;
  input = document.getElementById('search-input');
  filter = input.value.toUpperCase();
  ul = document.getElementById("project-list");
  li = ul.getElementsByTagName('li');
  
  for (i = 0; i &lt; li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          li[i].style.display = "";
      } else {
          li[i].style.display = "none";
      }
  }
  }
  </code></pre>
  
  <hr>
  
  <p>The above code makes the button delete every line containing the word "Beatles". I'm trying to remove the lines that contain whatever goes into <em>search-input</em>, preferably non-case sensitive (just like the filtering). Ideally, I want this to not work when the filter textbox is empty, so that an accidental click on the remove button won't delete the whole list.</p>
  
  <p>I'm using <em>jquery-2.1.1</em> and <em>jqm-1.4.4</em></p>