javascript - 用JS实现删除DOM 中的TABLE 的问题
问题描述
下面是页面的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='AC01.rowSet.primary[0].data.AAR002'></span> --><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='AC01.rowSet.primary[0].data.AAC004'></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> <!-- <td colspan='6'>A19 是否独生子女户(单选):<span style='vertical-align:middle'><input type='checkbox' name='AAC013' ng-checked='isChecked(AC01,’AAC013’, ’1’)' disabled>是</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' name='AAC013' ng-checked='isChecked(AC01,’AAC013’, ’0’)' disabled>否</span> </td> <td colspan='6' class='right'>A20 是否双女户(单选):<span style='vertical-align:middle'><input type='checkbox' name='AAC014' ng-checked='isChecked(AC01,’AAC014’, ’1’)' disabled>是</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox' name='AAC014' ng-checked='isChecked(AC01,’AAC014’, ’0’)' 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'>家庭住址:<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> <!-- <td colspan='6'>A19 是否独生子女户(单选):<span style='vertical-align:middle'><input type='checkbox'>是</span><span style='vertical-align:middle; margin-left:10px;'><input type='checkbox'>否</span> </td> <td colspan='6' class='right'>A20 是否双女户(单选):<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='row in AB01.rowSet.primary'> --><!-- ngRepeat: cell in row.AB01 --><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><!-- end ngRepeat: cell in row.AB01 --><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])
相关文章:
1. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!2. docker gitlab 如何git clone?3. docker安装后出现Cannot connect to the Docker daemon.4. docker内创建jenkins访问另一个容器下的服务器问题5. dockerfile - 为什么docker容器启动不了?6. nignx - docker内nginx 80端口被占用7. 在mac下出现了两个docker环境8. 如何解决docker宿主机无法访问容器中的服务?9. debian - docker依赖的aufs-tools源码哪里可以找到啊?10. docker 17.03 怎么配置 registry mirror ?