title: Javascript: Removing all elements within a div except for one
body: <p>Good evening!</p>
  
  <p>I have a HTML document which contains a lot of  elements in a container div that represent movie titles. I have an input box in which the user can search for a movie title and if there is a match, I want to empty the container div that contains the  elements completely, EXCEPT for the matched movie title. So far I have been trying to do it like this: </p>
  
  <pre><code>function Search() {
      var userinput = document.getElementById("userinput").value.toLowerCase();
      if (!userinput.replace(/\s+/g, '')) {
          alert('You havent entered any search words.');
          return;
      }
  
      userinput = userinput.toLowerCase();
      var list = document.getElementsByTagName("h3");
      var i = list.length,
          html, flag = false,
          matches = [];
  
      while (i--) {
          var html = list[i].innerHTML.toLowerCase();
          if (-1 &lt; html.indexOf(userinput)) {
              flag = true;
              matches.push(list[i]);
              list[i].className = "matched";
          }
      }
  
      if (!flag) //geen match
      {
          if (-1 !== html.indexOf(userinput))
              alert('No match found !');
      } else {
          for (var i = 0; i &lt; matches.length; i++) {
              matches[i].style.backgroundColor = "#ff6d6d";
              $("#overzicht_list").children().filter(function() {
                  return $(this).text().indexOf(matches[i]) &lt; -1;
              }).remove();
          }
      }
  </code></pre>
  
  <p>HTML Example of Full movie:</p>
  
  <pre><code>&lt;div class="overzicht-wrap" id="overzicht-wrap"&gt;
              &lt;div class="container module"&gt;
                  &lt;ul class="overzicht_list" id="overzicht_list"&gt;
                      &lt;li class="overzicht_list_item"&gt;
                          &lt;div class="item_info"&gt;
                              &lt;img class="item_cover" src="images/covers/as_above_so_below.jpg" alt="As Above, So Below cover"&gt;
  
                              &lt;a href="#" class="button-inactive"&gt;Draait niet meer&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;!-- end item_info --&gt;
  
                          &lt;div class="item_content"&gt;
                          &lt;h3&gt;as above, so below&lt;/h3&gt;
                              &lt;p&gt;
                                  Onder de straten van Parijs liggen kilometers aan gangenstelsels, de eeuwige thuishaven van talloze zielen. Wanneer een team van ontdekkingsreizigers het doolhof van botten verkent, ontdekt men het duistere geheim dat binnen deze stad van de doden ligt verscholen...
                              &lt;/p&gt;
  
                              &lt;a href="details/as_above_so_below.html"&gt;Lees meer&lt;/a&gt;   &lt;a onclick="SetFavorites()"&gt;&lt;i class="fi-star" id="star"&gt;&lt;/i&gt;&lt;/a&gt;
  
                              &lt;ul class="ratings"&gt;
                                  &lt;li&gt;&lt;img src="images/ratings/16.png" alt="16"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;img src="images/ratings/angst.png" alt="16"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;img src="images/ratings/geweld.png" alt="16"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;img src="images/ratings/grof_taalgebruik.png" alt="16"&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;!-- end overzicht_list_item. Do note that the divs above are closed elsewhere --&gt;
  </code></pre>
  
  <p>As you can see, I start off by doing some simple input validation to see if the user has actually entered anything. Them, I declare a bunch of variables for later use.</p>
  
  <p>Afterwards, I loop through the List Var that contains all of the  elements. If there is a match with the userinput, the variable flag gets set to true and the name of the matched  element gets pushed into the matches[] array. </p>
  
  <p>Then, if the flag variable is set to true I want the script to remove every element in the overzicht_container (the word "overzicht" means "overview" in dutch, sorry about that) EXCEPT for the matched  element.</p>
  
  <p>This last bit is what is troubling me. I cannot seem to get it to work: I tried to filter the Remove() event as you can see, but nothing gets removed.</p>
  
  <p>Can anyone help me?</p>
  
  <p>Thanks!</p>