如何在html里删除一个div？

html-css013

如何在html里删除一个div？,第1张

例

HTML：

<div id="outside">

<div id="inside"></div>

</div>

删除id为inside的div

方法一：document.getElementById('inside').remove()

方法二：document.getElementById('outside').removeChild(document.getElementById('inside'))

通过removeChild() 方法指定元素的某个指定的子节点来完成javascript删除一个html元素。

javascript删除一个html元素的步骤：

<!--创建一个html文件-->

<div id="div">

<div id="div1">知道</div>

<input type="button" value="删除div1" id="btn"/>

</div>

<script>

var o=document.getElementById("div")//获取父节点

var a=document.getElementById("div1")//获取需要删除的子节点

var b=document.getElementById("btn")//获取触发事件的节点

b.onclick=function(){o.removeChild(a)//从父节点o上面移除子节点a}

</script>

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

<script type="text/javascript">

var tmp=1

function XX(){

var tab = document.getElementById("tab")

var span = document.createElement("span")

var tr = document.createElement("tr")

var select = document.createElement("select")

var textarea1 = document.createElement("textarea")

var textarea2 = document.createElement("textarea")

var textarea3 = document.createElement("textarea")

var textarea4 = document.createElement("textarea")

var inputDel = document.createElement("input")

select.add(new Option("css","cssEntryAddress"))

select.add(new Option("regex","regexEntryAddress"))

select.add(new Option("xpath","xpathEntryAddress"))

select.setAttribute("style", "width:80px")

textarea1.setAttribute("placeholder", "范例：")

textarea1.setAttribute("style", "width:130px")

textarea1.setAttribute("rows", "1")

textarea2.setAttribute("placeholder", "范例：")

textarea2.setAttribute("style", "width:155px")

textarea2.setAttribute("rows", "1")

textarea3.setAttribute("placeholder", "范例：")

textarea3.setAttribute("style", "width:155px")

textarea3.setAttribute("rows", "1")

textarea4.setAttribute("placeholder", "范例：")

textarea4.setAttribute("style", "width:155px")

textarea4.setAttribute("rows", "1")

inputDel.setAttribute("type", "button")

inputDel.setAttribute("value", "删除")

inputDel.setAttribute("class", "btn btn-info")

inputDel.setAttribute("style", "width:50px")

inputDel.setAttribute("onclick", "deltd(this)")

span.appendChild(select)

span.appendChild(textarea1)

span.appendChild(textarea2)

span.appendChild(textarea3)

span.appendChild(textarea4)

span.appendChild(inputDel)

tr.appendChild(span)

tab.appendChild(tr)

tmp++

}

function deltd(a){

a.parentNode.parentNode.removeChild(a.parentNode)

}

</script>

</head>

<body>

<form action="">

<input type="button" onclick="XX()" id="add" value="增加行"/>

<table id="tab">

</table>

</form>

</body>

</html>

这是代码