TheMrNiceGuy Dynamic Div Removal Tutorial

<!--TheMrNiceGuy Dynamic Search Tutorial-->
<!DOCTYPE=html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">//this enables JQuery</script>
<style type="text/css">
.container
{
width: 100%;
}

.container_of_hc
{
border: solid 3px #B30015;
height: 100px;
}

.horizontal_containers
{
font-size: 45px;
text-align: center;
width: 75%;
float: left;
}

.color
{
float: right;
text-align: center;
width: 20%;
height:25%;
font-size:12px;
}
</style>
<title>TheMrNiceGuy Dynamic Search Tutorial</title>
</head>
<body>

<div>
    <div class="search_bar">
        <form><!--The Field from which to gather data-->
            <input id="searchfield" onclick="value=''" value="Case Sensitive Search">
        </form>
        <script>//This is the script for showing and hiding.
            $("#searchfield").keyup(function() {
                var str = $("#searchfield").val();  //get current value of id=searchfield
                if (str.length == 0)                //if searchfield is empty, show all
                {
                    $(".horizontal_containers").show();
                }
                else                //if input contains matching string, show div
                {                   //if input does not contain matching string, hide div
                $("div:contains('" + str + "').horizontal_containers").show();
                $("div:not(:contains('" + str + "')).horizontal_containers").hide();
                }
                /*
                if (str.length == 0)                //if searchfield is empty, show all
                {
                    $(".container .color").show();
                }
                else                //if input contains matching string, show div
                {                   //if input does not contain matching string, hide div
                    $(".container div:contains('" + str + "').color").show();
                    $(".container div:not(:contains('" + str + "')).color").hide();
                }*/
            });
        </script>
    </div>
</div>
<!--Containers With Text-->
<div class="container">
    <div class="container_of_hc">
        <div class="horizontal_containers">Cat</div>
        <div class="color">Black</div>
        <div class="color">White</div>
        <div class="color">Orange</div>
    </div>
    <div class="horizontal_containers">Dog</div>
    <div class="horizontal_containers">Rat</div>
    <div class="horizontal_containers">Zebra</div>
    <div class="horizontal_containers">Wolf</div>
    <div class="horizontal_containers">Monkey</div>
    <div class="horizontal_containers">Bear</div>
    <div class="horizontal_containers">Ostrich</div>
</div>
</body>
</html>