文章詳情頁

javascript - 用JS實現刪除DOM 中的TABLE 的問題

瀏覽：47日期：2023-03-11 18:50:17

問題描述

下面是頁面的HTML。我想實現用JS操作DOM，把第一個table從頁面上刪除掉。我用的代碼是：

document.getElementsByTagName('table')[0].innerHTML=''; //沒效果OR document.getElementsByTagName('table')[0].parentNode.removeChild('table')錯誤信息：Uncaught TypeError: Failed to execute ’removeChild’ on ’Node’: parameter 1 is not of type ’Node’.at TypeError (native)at <anonymous>:2:54at Object.InjectedScript._evaluateOn (<anonymous>:878:140)at Object.InjectedScript._evaluateAndWrap (<anonymous>:811:34)at Object.InjectedScript.evaluate (<anonymous>:667:21)HTML：

<table cellpadding='0' cellspacing='0'> <tbody><tr> <td colspan='17' style='border:none;'><h1>貧困戶信息對照采集表</h1> </td></tr><tr> <td colspan='17' style='border:none;'><h2>一、基本信息</h2> </td></tr><tr> <td colspan='17' style='border:none;'><h2><span ng-bind='compare_year' class='ng-binding'>2016</span>年度</h2> </td></tr><tr> <td colspan='17' class='top right'>家庭住址：<span ng-bind='row.AC01.data.AAR002'>山東省</span> 省（區、市）<span ng-bind='row.AC01.data.AAR003'>聊城市</span>市（地、州、盟）<span ng-bind='row.AC01.data.AAR004'>臨清市</span>縣（市、區、旗）<span ng-bind='row.AC01.data.AAR005'>松林鎮</span>鎮（鄉）<span ng-bind='row.AC01.data.AAR006'>倉上村委會</span>村<span class='underline district'>  </span>自然村（屯） </td></tr><tr> <td colspan='17' class='right'>聯系電話：<span ng-bind='row.AC01.data.AAR012'>13021751229</span>  開戶銀行（選填）：<span ng-bind='row.AC01.data.AAQ002'>山東省農村信用社聯合社</span>  銀行賬號（選填）：<span ng-bind='row.AC01.data.AAC004'>6223*51675</span> </td></tr><tr> <td colspan='7'>A16 識別標準（單選）：<span style='vertical-align:middle'><input type='checkbox' name='AAC005' ng-checked='isChecked(row.AC01.data.AAC005,’01’)' disabled='' checked='checked'>國家標準</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' name='AAC005' ng-checked='isChecked(row.AC01.data.AAC005,’02’)' disabled=''>省定標準</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' name='AAC005' ng-checked='isChecked(row.AC01.data.AAC005,’03’)' disabled=''>市定標準</span> </td> <td colspan='8' class='right'>A17貧困戶屬性（單選）：<span style='vertical-align:middle'><input type='checkbox' ng-checked='isChecked(row.AC01.data.AAC006,’01’)' disabled='' checked='checked'>一般貧困戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' ng-checked='isChecked(row.AC01.data.AAC006,’04’)' disabled=''>低保貧困戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' ng-checked='isChecked(row.AC01.data.AAC006,’06’)' disabled=''>五保貧困戶</span> </td> <td colspan='2' class='right'>脫貧年度：<span ng-bind='row.AC01.data.AAC016'></span> </td></tr><tr> <td colspan='17'>A18 是否軍烈屬（單選）：<span style='vertical-align:middle'><input type='checkbox' name='AAC012' ng-checked='isChecked(row.AC01.data.AAC012,’1’)' disabled=''>是</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' name='AAC012' ng-checked='isChecked(row.AC01.data.AAC012,’0’)' disabled='' checked='checked'>否</span> </td> </tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr><tr> <td colspan='17' style='border:none;'><h2>2017年度</h2> </td></tr><tr> <td colspan='17' class='top right'>家庭住址：<span class='underline district'>    </span>省（區、市）<span class='underline district'>    </span>市（地、州、盟）<span class='underline district'>    </span>縣（市、區、旗）<span class='underline district'>    </span>鎮（鄉、蘇木）<span class='underline district'>    </span>村<span class='underline district'>    </span>自然村（屯） </td></tr><tr> <td colspan='17' class='right'>聯系電話：<span class='underline'>            </span>  開戶銀行（選填）：<span class='underline'>            </span>  銀行賬號（選填）：<span class='underline'>            </span> </td></tr><tr> <td colspan='7'>A16 識別標準（單選）：<span style='vertical-align:middle;'><input type='checkbox'>國家標準</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>省定標準</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>市定標準</span> </td> <td colspan='8' class='right'>A17 貧困戶屬性（單選）：<span style='vertical-align:middle'><input type='checkbox'>一般貧困戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>低保貧困戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>五保貧困戶</span><br>            <span style='vertical-align:middle'><input type='checkbox'>一般農戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>低保戶</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>五保戶</span> </td> <td colspan='2' class='right'>脫貧年度：<span class='underline'>    </span> </td></tr><tr> <td colspan='17' class='right'>A18 是否軍烈屬（單選）：<span style='vertical-align:middle'><input type='checkbox'>是</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>否</span> </td> </tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr> </tbody></table><table cellpadding='0' cellspacing='0' style='word-wrap: break-word;'> <colgroup><col width='10px'><col width='49px'><col width='10px'><col width='88px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'><col width='49px'> </colgroup> <tbody style='text-align:center;'><tr> <td colspan='19' style='border:none;'><h2>二、家庭成員信息</h2> </td></tr><tr> <td colspan='19' style='border:none;'><h2><span ng-bind='compare_year' class='ng-binding'>2016</span>年度</h2> </td></tr><tr> <td class='top'>序號 </td> <td class='top'>A1<br>姓名 </td> <td class='top'>A2<br>性別 </td> <td colspan='3'>A3<br>證件號碼 </td> <td class='top'>A4<br>與戶主關系 </td> <td class='top'>A5<br>民族 </td> <td class='top'>A6<br>政治面貌 </td> <td class='top'>A7<br>文化程度 </td><td class='top'>A8<br>在校生情況 </td> <td class='top'>A9<br>健康狀況 </td> <td class='top'>A10<br>勞動技能 </td> <td class='top'>A11<br>務工情況 </td> <td class='top'>A12<br>務工時間(單位:月) </td> <td class='top'>A13<br>是否現役軍人 </td> <td class='top right'>A14<br>是否參加大病醫療保險 </td></tr><tr ng-repeat='cell in row.AB01' class='ng-scope'> <td ng-bind='$index+1' class='ng-binding'>1</td> <td ng-bind='cell.data.AAB002' class='ng-binding'>郝連英</td> <td ng-bind='cell.data.AAB003' class='ng-binding'>女</td> <td colspan='3' ng-bind='cell.data.AAB004' class='ng-binding'>372502*151760</td> <td ng-bind='cell.data.AAB006' class='ng-binding'>戶主</td> <td ng-bind='cell.data.AAB007' class='ng-binding'>漢族</td> <td ng-bind='cell.data.AAK033' class='ng-binding'>群眾</td> <td ng-bind='cell.data.AAB008' class='ng-binding'>小學</td> <td ng-bind='cell.data.AAB009' class='ng-binding'>非在校生</td> <td ng-bind='cell.data.AAB017' class='ng-binding'>患有大病</td> <td ng-bind='cell.data.AAB010' class='ng-binding'>無勞動力</td> <td ng-bind='cell.data.AAB011' class='ng-binding'>其他</td> <td ng-bind='cell.data.AAB012' class='ng-binding'>0</td> <td ng-bind='cell.data.AAB019' class='ng-binding'>否</td> <td ng-bind='cell.data.AAB022'></td></tr><tr> <td colspan='19' style='border:none;'><h2>2017年度</h2> </td></tr><tr> <td class='top'>序號 </td> <td class='top'>A1<br>姓名 </td> <td class='top'>A2<br>性別 </td> <td colspan='3'>A3<br>證件號碼 </td> <td class='top'>A4<br>與戶主關系 </td> <td class='top'>A5<br>民族 </td><td class='top'>A6<br>政治面貌 </td><td class='top'>A7<br>文化程度 </td><td class='top'>A8<br>在校生情況 </td> <td class='top'>A9<br>健康狀況 </td> <td class='top'>A10<br>勞動技能 </td> <td class='top'>A11<br>務工地點 </td> <td class='top'>A12<br>務工時間(單位:月)</td> <td class='top'>A13<br>是否現役軍人 </td> <td class='top'>A14<br>是否參加大病醫療保險</td> <td class='top'>A15<br>是否享受低保 </td> <td class='top'>A50<br>務工企業名稱 </td> <td class='top right'>聯系電話 </td></tr><tr> <td>1</td> <td></td> <td></td> <td colspan='3'></td> <td>戶主</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td class='right'></td></tr><tr> <td>2</td> <td></td> <td></td> <td colspan='3'></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td class='right'></td></tr><tr> <td>3</td> <td></td> <td></td> <td colspan='3'></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class='right'></td></tr><tr> <td>4</td> <td></td> <td></td> <td colspan='3'></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class='right'></td></tr><tr> <td>5</td> <td></td> <td></td> <td colspan='3'></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class='right'></td></tr><tr> <td>6</td> <td></td> <td></td> <td colspan='3'></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class='right'></td></tr> </tbody></table><table cellpadding='0' cellspacing='0'> <tbody><tr> <td colspan='17' style='border:none;'><h2>三、致貧原因</h2> </td></tr><tr> <td colspan='17' style='border:none;'><h2><span ng-bind='compare_year' class='ng-binding'>2016</span>年度</h2> </td></tr><tr> <td colspan='17' class='top right'>A22 主要致貧原因（單選）：<span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’01’)' disabled=''>因病</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’02’)' disabled=''>因殘</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’03’)' disabled=''>因學</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’04’)' disabled=''>因災</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’05’)' disabled=''>缺土地</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’06’)' disabled=''>缺水</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’07’)' disabled=''>缺技術</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’08’)' disabled='' checked='checked'>缺勞動力</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’09’)' disabled=''>缺資金</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’10’)' disabled=''>交通條件落后</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC007' ng-checked='isChecked(row.AC01.data.AAC007, ’11’)' disabled=''>自身發展動力不足</span> </td></tr><tr> <td colspan='17' class='right'>A23 其他致貧原因（最多選兩項）：<span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’01’)' disabled=''>因病</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’02’)' disabled=''>因殘</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’03’)' disabled=''>因學</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’04’)' disabled=''>因災</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’12’)' disabled=''>因婚</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’05’)' disabled=''>缺土地</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’06’)' disabled=''>缺水</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’07’)' disabled=''>缺技術</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’08’)' disabled=''>缺勞動力</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’09’)' disabled=''>缺資金</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’10’)' disabled=''>交通條件落后</span><span style='vertical-align:middle;'><input type='checkbox' name='AAC008' ng-checked='isChecked(row.AC01.data.AAC008, ’11’)' disabled=''>自身發展動力不足</span> </td></tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr><tr> <td colspan='17' style='border:none;'><h2>2017年度</h2> </td></tr><tr> <td colspan='17' class='top right'>A22 主要致貧原因（單選）：<span style='vertical-align:middle'><input type='checkbox'>因病</span><span style='vertical-align:middle;'><input type='checkbox'>因殘</span><span style='vertical-align:middle;'><input type='checkbox'>因學</span><span style='vertical-align:middle;'><input type='checkbox'>因災</span><span style='vertical-align:middle;'><input type='checkbox'>缺土地</span><span style='vertical-align:middle;'><input type='checkbox'>缺水</span><span style='vertical-align:middle;'><input type='checkbox'>缺技術</span><span style='vertical-align:middle;'><input type='checkbox'>缺勞動力</span><span style='vertical-align:middle;'><input type='checkbox'>缺資金</span><span style='vertical-align:middle;'><input type='checkbox'>交通條件落后</span><span style='vertical-align:middle;'><input type='checkbox'>自身發展動力不足</span> </td></tr><tr> <td colspan='17' class='right'>A23 其他致貧原因（最多選取兩項）：<span style='vertical-align:middle'><input type='checkbox'>因病</span><span style='vertical-align:middle;'><input type='checkbox'>因殘</span><span style='vertical-align:middle;'><input type='checkbox'>因學</span><span style='vertical-align:middle;'><input type='checkbox'>因災</span><span style='vertical-align:middle;'><input type='checkbox'>因婚</span><span style='vertical-align:middle;'><input type='checkbox'>缺土地</span><span style='vertical-align:middle;'><input type='checkbox'>缺水</span><span style='vertical-align:middle;'><input type='checkbox'>缺技術</span><span style='vertical-align:middle;'><input type='checkbox'>缺勞動力</span><span style='vertical-align:middle;'><input type='checkbox'>缺資金</span><span style='vertical-align:middle;'><input type='checkbox'>交通條件落后</span><span style='vertical-align:middle;'><input type='checkbox'>自身發展動力不足</span> </td></tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr> </tbody></table><p style='page-break-after:always'></p><table cellpadding='0' cellspacing='0'> <tbody><tr> <td colspan='17' style='border:none;'><h2>四、收入情況</h2> </td></tr><tr> <td colspan='17' style='border:none;'><h2><span ng-bind='compare_year' class='ng-binding'>2016</span>年度</h2> </td></tr><tr> <td colspan='4'>A39 工資性收入（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC073'>0</td> <td colspan='4'> A42a 計劃生育金（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC076'>0</td> <td colspan='3'> A42e 生態補償金（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC078'>0</td></tr><tr> <td colspan='4'>A40 生產經營性收入（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC071' class='ng-binding'>2400</td> <td colspan='4'> A42b 低保金（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC077' class='ng-binding'>0</td> <td colspan='3'> A42f 其他轉移性收入（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC083'></td></tr><tr> <td colspan='4'>A41 財產性收入（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC072' class='ng-binding'>0</td> <td colspan='4'> A42c 五保金（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC086' class='ng-binding'></td> <td colspan='3'>A43 生產經營性支出（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC074'>700</td></tr><tr> <td colspan='4'>A42 轉移性收入（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC085' class='ng-binding'>1020</td> <td colspan='4'> A42d 養老保險金（元） </td> <td colspan='2' ng-bind='row.AC07.data.AAC087' class='ng-binding'>1020</td> <td colspan='3'></td> <td colspan='2'></td></tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr><tr> <td colspan='17' style='border:none;'><h2>2017年度</h2> </td></tr><tr> <td colspan='4'>A39 工資性收入（元） </td> <td colspan='2'></td> <td colspan='4'> A42a 計劃生育金（元） </td> <td colspan='2'></td> <td colspan='3'> A42e 生態補償金（元） </td> <td colspan='2'></td></tr><tr> <td colspan='4'>A40 生產經營性收入（元） </td> <td colspan='2'></td> <td colspan='4'> A42b 低保金（元） </td> <td colspan='2'></td> <td colspan='3'> A42f 其他轉移性收入（元） </td> <td colspan='2'></td></tr><tr> <td colspan='4'>A41 財產性收入（元） </td> <td colspan='2'></td> <td colspan='4'> A42c 五保金（元） </td> <td colspan='2'></td> <td colspan='3'>A43 生產經營性支出（元） </td> <td colspan='2'></td></tr><tr> <td colspan='4'>A42 轉移性收入（元） </td> <td colspan='2'></td> <td colspan='4'> A42d 養老保險金（元） </td> <td colspan='2'></td> <td colspan='3'></td> <td colspan='2'></td></tr><tr class='hiddenRow'> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td></tr> </tbody>

問題解答

回答1：

innerHTML改變的是表格內的內容，不是刪除表格，當然從頁面看起來innerHTML=''和刪除的效果幾乎一樣，至于你的innerHTML=''為什么沒效果，不好意思，HTML代碼太長了，就沒仔細看了removeChild中傳的參數是節點，不是字符串

回答2：

removeChild 接受一個 HTMLElement 元素，所以得 removeChild(document.getElementsByTagName('table')[0])

JavaScript

上一條：javascript - setIndex的作用下一條：javascript - es6模塊加載export的輸出值有點沒太搞明白

相關文章：

1. javascript - URL中有#號如何來獲取參數啊？ nodejs2. javascript - jquery選擇的dom元素如何更新？3. mysql輸入賬號密碼后跳出一大堆內容后但卻進不了mysql？4. javascript - nodejs統計對應ip地址的對某個接口的請求次數5. python - flask jinjia2 中怎么定義嵌套變量6. .......7. javascript - nidejs環境設置操作一直出現這種問題怎么解決？8. 數據庫 - mysql boolean型無法插入true9. python - Django問題 ’WSGIRequest’ object has no attribute ’user’10. javascript - H5頁面無縫輪播

排行榜

					
					mysql輸入賬號密碼后跳出一大堆內容后但卻進不了mysql？
java - 為什么這段代碼執行偶爾能夠達到50~100ms？
數據庫 - mysql boolean型無法插入true
算法 - 如何不用遞歸 列出 樹（多叉） 中根節點到葉節點的所有路徑（Java）
javascript - jquery選擇的dom元素如何更新？
如何去實現memcache的gui？
javascript - nodejs統計對應ip地址的對某個接口的請求次數
java - Spring boot 改成war后部署到本地的tomcat上,無法訪問項目
python - Django問題 ’WSGIRequest’ object has no attribute ’user’
javascript - nidejs環境設置操作一直出現這種問題怎么解決？
.......
				

熱門標簽

亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

javascript - 用JS實現刪除DOM 中的TABLE 的問題