JS+Html控制控件的显示与隐藏

有一个需求是利用一个button按钮，控制另一个控件的显示与隐藏

点击加号可以添加一个监考，点击减号可以去掉一个监考。

function listchange() {

    var sel = document.getElementsByName('tasklist_type');
    for (var i = 0; i < tasklist_type.options.length; i++) {
        if (tasklist_type.options[i].selected) {
            if (tasklist_type.options[i].value == 0) {
                document.getElementById("tasklistoriginalno").style.display = "none";
                <span style="color:#FF0000;">document.getElementById("tasklist_originalno").value = "";</span>

                /*上面红色的这句话用处很大的，因为你想隐藏掉下面的一个表单，那么这个表单的值也就不需要写入数据库了，所以记得在隐藏的同时将被隐藏表单的值清空；当然要是你不嫌麻烦的话在表单的数据提交到php的数据处理页面的时候对 tasklist_type根据其值是0还是1来行进判断写不写入 tasklist_originalno 的值 */
            }
            if (tasklist_type.options[i].value == 1) {
                document.getElementById("tasklistoriginalno").style.display = "";
            }
        }
    }

}

views代码

<tr height='30'>
                 <td>bt : </td>
                 <td>
                    <select name="tasklist_type" id="tasklist_type"  onchange="listchange();return false;">
                        <option value="null" >1</option>
                        <option value="0" >2</option>
                        <option value="1" >3</option>
                    </select>
                </td>
             </tr>
             <tr height='30'  id='tasklistoriginalno'>
               <td>bt2:</td>
               <td colspan='3'><input type='text'  id='tasklist_originalno' name='tasklist_originalno'/></td>
             </tr>

        这个还不是最佳的解决方法，在页面新加载的时候，只有主监考一条信息，隐藏的信息不会被保存到数据库中，当点击添加的时候显示隐藏信息，但是这样的操作，隐藏信息都是占用空间的。

       如何做才能隐藏不占空间，显示才在页面上占空间？？？

知识点：在html中属性visibility的hidden 和 visible也可以做到控制隐藏和显示。

参考：http://bbs.csdn.net/topics/70269675

           http://bbs.csdn.net/topics/330196389

           。。。