HTMLに2つのリストボックス(SELECT)があり、
1つ目のリストの選択を変更時に、
2つ目のリストをクリアするJavaScript?が組めません。

下記、ソース例ですが、JavaScriptの書き方や書いてある場所が悪いと
考えていますが、試行錯誤しても解決できない状態です。
※HTMLやJavaScriptの記述は、ブラウザがHTMLを読み込む時に上から
読み解釈し実行していくとあるJavaScriptの初心者用説明サイトに記述あり。


HTMLソース
------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <TITLE>車と色の選択</TITLE>
    
    <STYLE type="text/css">
    <!--
    BODY {
      border-top: 2px #FF0000 solid;
      text-align: center;
      color: #000000;
    }
    -->
    </STYLE>
    
    
    <SCRIPT TYPE="text/javascript">
    <!--
      // 他のJava Script
    //-->
    </SCRIPT>
    
    // 拾ってきたコードだけど動かない
    <SCRIPT TYPE="text/javascript">
    <!--
    function DeleteListColor(x)
    {
      if (x.hasChildNodes()) {
        while (x.childNodes.length > 0) {
          x.removeChild(x.firstChild)
        }
      }
    }
    //-->
    </SCRIPT>
    
    </HEAD>
    
    
    
    <!-- ----------------------------------------------------------  -->
    <!-- body start------------------------------------------------  -->
    <BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
    <DIV>
    
    
    <!-- 拾ってきたコードだけど動かない -->
    <!--
    コメントアウト
    <script type="text/javascript">
      function DeleteListColor() {
        sl = document.form_list_color.getElementById('list_color');
        while (sl.lastChild)
        {
          sl.removeChild(sl.lastChild);
        }
      }
    </script>
    -->
    
    <!-- 拾ってきたコードだけど動かない -->
    <!--
    コメントアウト
    <script type="text/javascript">
      function DeleteListColor() {
        var obj = document.getElementById('list_color');
        var f = obj.form;
        for (var i = 0; i < f.length; i++){
          if ((f[i].type == "select-one") && (f[i] != obj)) {
            f[i].selectedIndex = 0;
          }
        }
      }
    </script>
    -->
    
    
    
    <!-- 以下、ここへ掲載用に単純化してある為、無意味なTABLEやsubmitにみえる -->
    
    <!-- 行いたいことは、list_carの選択を変更時、list_colorのリストをクリア。 -->
    <!-- ※クリア後、 -->
    
    
    <FORM name="form_list_car" method="post" action="this.html">
      <TABLE>
       <CAPTION>1.車の種類のリストボックス</CAPTION>
        <TR>
          <TD>
            <SELECT name="list_car" onChange="DeleteListColor(list_color)">
              <OPTION align="left" value="car1">CAR1</OPTION>
              <OPTION align="left" value="car2">CAR2</OPTION>
              <OPTION align="left" value="car3">CAR3</OPTION>
           </SELECT>
          </TD>
        </TR>
      </TABLE>
    
      <!-- 本来は、色のクリア以外にも、車種に合わせた色をlist_colorに再設定など、使い方は色々 -->
      <INPUT type="submit" name="submit_list_car" value="この見本は再帰呼び出しボタン" />
    </FORM>
    
    <BR>
    
    <FORM name="form_list_color" method="post" action="next.html">
      <TABLE>
       <CAPTION>2.車の色のリストボックス</CAPTION>
        <TR>
          <TD>
            <!-- sizeは、なぜか?パソコンでしか有効ではない。Padやスマフォは1行になる -->
            <SELECT name="list_color" size="3">
              <OPTION align="left" value="red">   赤色</OPTION>
              <OPTION align="left" value="yellow">黄色</OPTION>
              <OPTION align="left" value="black"> 黒色</OPTION>
           </SELECT>
          </TD>
        </TR>
      </TABLE>
    
      <INPUT type="submit" name="submit_list_color" value="次画面へ遷移" />
    </FORM>
    
    
    </DIV>
    </BODY>
    </HTML>

------------------------------------------------------------

以上です。