使用parent.removeChild（子）刪除表格行

我有一個表格，當用戶打開頁面並且用戶添加了行時，它就從空白處開始。用戶搜索一個數據庫並將結果回顯到下面的代碼中的「搜索結果」表中。使用parent.removeChild（子）刪除表格行

while ($dbsearch = mysqli_fetch_assoc($run_query)) 
     { 
      $dbu = $dbsearch['Username']; 
      $id = $dbsearch['PlayerID']; 
      $func = "add(" . $id . ", Brad Henry)"; 
     array_push ($_SESSION['players'],$dbsearch['PlayerID']); 
     echo "<tr><td>".$id ."</td><td>".$dbu."</td><td><input type=\"submit\" id=\"PlayerAdded".$id."\" value=\"Add\" onclick=\"add('".$id."','".$dbu."');\"></input></td></tr>"; 
     }

這工作得很好。當用戶點擊添加，如下函數將搜索結果以「今天的事件」表：

function add(id,name){ 
    var t = ("</td><td>"); 
    var str = ("<tr id='Players" + id + "'><td>") 
    var ctr = ("</td></tr>") 
    var place = ("<select name='place'><option value='17'>17th</option><option value='16'>16th</option><option value='15'>15th</option><option value='14'>14th</option><option value='13'>13th</option><option value='12'>12th</option><option value='11'>11th</option><option value='10'>10th</option><option value='9'>9th</option><option value='8'>8th</option><option value='7'>7th</option><option value='6'>6th</option><option value='5'>5th</option><option value='4'>4th</option><option value='3'>3rd</option><option value='2'>2nd</option><option value='1'>1st</option></select>") 
    var points = ("<input name='points' placeholder='50'></input>"); 
    var cash = ("$<input name='cash' placeholder='0'></input>"); 
    var ticket = ("<select name='ticket'><option value='No'>No</option><option value='Yes'>Yes</option>"); 
    var del = ("<input type='submit' value='Delete' onclick='remove(" + id + ")'> </input>") 

    $('#PlayerAdded').before(str+ id + t + name + t + place + t + points + t + cash + t + ticket + t + del + ctr); 
}

我的問題是，點擊刪除按鈕（VAR DEL）時，沒有任何反應。 var del調用下面粘貼的「刪除」功能。我不確定錯誤在哪裏，我一直在網上尋找答案，但無濟於事。我不知道如果我聲明var child不正確，因爲它看起來與這兩個字符串和INT的elementID ...

function remove(RowID) { 
    var parent = document.getElementById("resultTable"); 
    var child = document.getElementById("Players" + RowID); 
    parent.removeChild(child); 
}

來源

2015-08-29 Tunna182

爲什麼不只是'child.parentElement.removeChild（child）;'？ – Jan

沒有必要選擇父元素，你可以使用** element.parentNode.removeChild（element）** – Rayon

@Jan這太棒了！謝謝你，我是JS新手，並且還有很多東西需要了解它，我只是開始瞭解DOM。再次感謝。如果您輸入該答案作爲答案，我會很樂意勾選它，以便獲得聲望點：D – Tunna182

你的代碼會產生無效的HTML標記。刪除標記爲**的項目並添加標記爲++的項目。我使用值10作爲代碼中的id。

<table> 
     <tr id='Players10'> 
    <td>10</td> 
    <td></td> 
    <td><select name='place'> 
     <option value='17'>17th</option> 
     <option value='16'>16th</option> 
     <option value='15'>15th</option> 
     <option value='14'>14th</option> 
     <option value='13'>13th</option> 
     <option value='12'>12th</option> 
     <option value='11'>11th</option> 
     <option value='10'>10th</option> 
     <option value='9'>9th</option> 
     <option value='8'>8th</option> 
     <option value='7'>7th</option> 
     <option value='6'>6th</option> 
     <option value='5'>5th</option> 
     <option value='4'>4th</option> 
     <option value='3'>3rd</option> 
     <option value='2'>2nd</option> 
     <option value='1'>1st</option> 
     </select></td> 
    <td><input name='points' placeholder='50'> 
     **</input>**</td> 
    <td>$ 
     <input name='cash' placeholder='0'> 
     **</input>**</td> 
     <td> 
     <select name='ticket'> 
    <option value='No'>No</option> 
    <option value='Yes'>Yes</option> 
++</select>++ 
     </td> 
     <td> 
     <input type='submit' value='Delete' onclick='remove(10)'> 
     **</input>** 
     </td> 
     </tr> 
</table>

然後再次測試您的代碼。

來源

2015-08-29 09:27:15 jeff

使用parent.removeChild（子）刪除表格行

回答

相關問題