jQuery/JavaScript: Using a JavaScript array in jQuery

Question

I'm pretty new to jQuery and I have the following issue:

I have made a JS script that compares user input to a bunch of <h3> elements that represent movie titles.

userinput = userinput.toLowerCase(); 
var list = document.getElementsByTagName("h3"); //dit wordt de lijst met titels
var i = list.length,
    html, flag = false,
    matches = []; 

while (i--)//here, we loop through the list of <h3>'s
{
    var html = list[i].innerHTML.toLowerCase();
    if (-1 < html.indexOf(userinput))
    {
        flag = true;
        matches.push(list[i]); 
        list[i].className = "matched";
    }
}

if (!flag)//no match 
{if (-1 !== html.indexOf(userinput))
    alert('No match found !');
}
else//match!
{
    for (var i = 0; i < matches.length; i++)
    {

        $("#overzicht_list").children(":not('')").remove();

  }
}

as you can see, I first declare some variables that I'm gonna use. Then, I loop through the list of <h3> elements and if one of the elements matches the user input I want to do the following.

All of the elements in my container overzicht_list BUT the matched <h3> element should be removed. I tried using the following jQuery for this:

$("#overzicht_list").children(":not('')").remove();

But I really cannot figure out how to refer to the matches[i] array within jQuery! I tried #matches[i] and stuff like that, but that does not seem to work. Can any of you help me?

Thanks!

Answer 1

I try to write your script in jQuery, and i try remove useless loop. I hope my script no change the behavior of your script:

find h3 element with userinout var inside text and remove it form DOM (during the loop or after), if no one was matched script fire an alert.

VER.1

var userinput = userinput.toLowerCase(), 
    flag = false;

//select and loop all H3 (with jQuery)
$("h3").each(function(){

    //if text inside H3 match with userinput
    if($(this).text().indexOf(userinput)  >= 0){
        //add class matched to the matched element
        $(this).addClass("matched");

        //flat to true
        flag = true;
    }
});

//check flag (if true remove al matched element)
if(flag)$("#overzicht_list .matched").remove();
else alert("No match found!");

or, next script is the same, but remove directly the matched element inside first loop:

VER.2

var userinput = userinput.toLowerCase(),
    flag = false;
$("h3").each(function(){
    if($(this).text().indexOf(userinput) >= 0){

        //directly remove matched element
        $(this).remove();
        flag = true;
    }
});

//if no one matched alert
if(!flag) alert("No match found!");

... right now you not have matches variable because it is useless, when you remove elements form DOM, you remove them references inside matches.

Answer 2

You would need to filter

$("#overzicht_list").children().filter(function(){
   return $(this).text().indexOf(matches[i]) < -1;
}).remove();