使用javascript刪除行時出錯？

Question

我有一個示例代碼：

<input type="checkbox" id="input_modem_1" onclick="add_delete_row(this, 1,'test1')" name="modem_id[]" value="1" /> test 1 
<input type="checkbox" id="input_modem_2" onclick="add_delete_row(this, 2,'test2')" name="modem_id[]" value="2" /> test 2 
<table id="modem_list"></table> 

和代碼的javascript：

<script> 
function add_delete_row(element, id, modem_name) { 
    if(element.checked) { 
     if(id) { 
      deleteRow(id); 
     } 
     addRow(id, modem_name); 
    } else { 
     deleteRow(id); 
    } 
} 
function addRow(id, modem_name) { 
    var table = document.getElementById("modem_list"); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "checkbox"; 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    element2.type = "hidden"; 
    element2.value = id; 
    cell2.innerHTML = modem_name; 
    cell2.appendChild(element2); 
} 
function deleteRow(id) { 
    try { 
     $('modem_list').removeChild($('modem_'+id)); 
     $('modem_list').removeChild($('input_modem_'+id)); 
    } catch(err){} 
} 
</script> 

當我檢查的值結果添加行，當我取消此行，是造成無法運行，並它添加更多的這一點，如何解決它

Answer 1

不能使用此代碼： 在function addRow()添加：

var row = table.insertRow(rowCount); 
row.className = "input_"+id; // with id is 1, 2, ...n 

和：

function deleteRow(id) { 
    try { 
     jQuery(".input_"+id).remove(); 
    } catch(err){} 
} 

Answer 2

如果你想使用jQuery選擇由ID元素，你需要使用hash符號。也就是說

$('#modem_list') 

不

$('modem_list') 

Answer 3

添加row.setAttribute("name","modem_"+id);後var row = table.insertRow(rowCount);

而更換function deleteRow(id)旁邊

function deleteRow(id) { 
    var table = document.getElementById("modem_list"); 
    var rowName = 'modem_'+id; 
    if (table.rows.namedItem(rowName)) { 
     table.deleteRow((table.rows.namedItem(rowName).rowIndex)); 
    } 
} 

它的工作原理沒有jQuery的