Javascript: Removing all elements within a div except for one

Question

Good evening!

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:

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 < 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 < matches.length; i++) {
            matches[i].style.backgroundColor = "#ff6d6d";
            $("#overzicht_list").children().filter(function() {
                return $(this).text().indexOf(matches[i]) < -1;
            }).remove();
        }
    }

HTML Example of Full movie:

<div class="overzicht-wrap" id="overzicht-wrap">
            <div class="container module">
                <ul class="overzicht_list" id="overzicht_list">
                    <li class="overzicht_list_item">
                        <div class="item_info">
                            <img class="item_cover" src="images/covers/as_above_so_below.jpg" alt="As Above, So Below cover">

                            <a href="#" class="button-inactive">Draait niet meer</a>
                        </div>
                        <!-- end item_info -->

                        <div class="item_content">
                        <h3>as above, so below</h3>
                            <p>
                                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...
                            </p>

                            <a href="details/as_above_so_below.html">Lees meer</a>   <a onclick="SetFavorites()"><i class="fi-star" id="star"></i></a>

                            <ul class="ratings">
                                <li><img src="images/ratings/16.png" alt="16"></li>
                                <li><img src="images/ratings/angst.png" alt="16"></li>
                                <li><img src="images/ratings/geweld.png" alt="16"></li>
                                <li><img src="images/ratings/grof_taalgebruik.png" alt="16"></li>
                            </ul>
                        </div>
                    </li>
                    <!-- end overzicht_list_item. Do note that the divs above are closed elsewhere -->

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.

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.

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.

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.

Can anyone help me?

Thanks!

Answer 1

And one more version. Note: I didn't remove elements but hid them. It allows to show relevant results even after typing in other word in <input>.

Fiddle.

HTML:

<input type="text" title="Zoekbalk" id="userinput" placeholder="Typ hier om te zoeken" class="input_box" />
<ul class="overzicht_list" id="overzicht_list">
    <h3>first</h3>
    <h3>second</h3>
    <h3>third</h3>
    <h3>four</h3>
    <h3>five</h3>
    <h3>six</h3>
</ul>

CSS:

.matched
{
    background-color: #ff6d6d
}

JS:

$(document).ready(function()
{
    $('#userinput').change(function()
    {
        var userinput = this.value.toLowerCase();
        var allElements = $('#overzicht_list h3');
        if (!userinput.replace(/\s+/g, ''))
        {
            alert("You haven't entered any search words.");
            allElements.removeClass("matched").show();
            return;
        }
        allElements.removeClass("matched").hide();
        allElements.filter(function()
        {
            var text = this.textContent.toLowerCase();
            return (text.indexOf(userinput) > -1);
        }).addClass("matched").show();
    });
});

Update. Updated fiddle for hiding all children (not only <h3>) and showing <li> and <div>, in which <h3> are wrapped.

Answer 2

You're doing this the hard way. Empty all the children and put the one you want back in:

var matched = match; //the matched node if found
var node = document.getElementById("foo");
while (node.firstChild) {
    node.removeChild(node.firstChild);
}
node.appendChild(matched);