HTMLに２つのリストボックス(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>１．車の種類のリストボックス</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>２．車の色のリストボックス</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>

以上です。