リスト動的に追加したり削除したりするサンプル

Ajax 
<html>
  <head>
    <script language="javascript" type="text/javascript"><!--
      var number = 3;
      function addItem(){
        number ++;
        var elem = document.createElement('li');
        elem.id = 'item' + number;
        var caption = document.createTextNode('リスト'+number);
        elem.appendChild(caption);
        document.getElementById('list').appendChild(elem);
      }                 
      function delItem(){
        if(number == 0){
          alert('削除できる項目がありません');
          return false;
        }
        var elem = document.getElementById('item'+number);
        document.getElementById('list').removeChild(elem);
        number--;
      }  
    //--></script>
  </head>
  <body>                   
    <h1 id="title">タイトル</h1>
    <input type="button" name="addBtn" value="追加" onclick="addItem()" />
    <input type="button" name="delBtn" value="削除" onclick="delItem()" />
    <ul id="list">
      <li id="item1">リスト1</li>
      <li id="item2">リスト2</li>
      <li id="item3">リスト3</li>
    </ul>
  </body>
</html>
document.getElementById('list').appendChild(elem);

appendChildで追加。

document.getElementById('list').removeChild(elem);

removeChildで削除