⑴ js實現刪除div，點擊一個，刪除對應的div
這邊修改了代碼，請保存為.html文件後測試。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刪除自己的div</title>
<style>
.wrap {
width: 400px;
height: 400px;
background-color: aqua;
}
.user-info {
width: 390px;
height: 120px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="del">
<div class="user-info">我是1</div>
<div class="user-info">我是2</div>
<div class="user-info">我是3</div>
</div>
</div>
<script>
var del = document.getElementsByClassName("del")[0];
var user = document.getElementsByClassName("user-info");
for (let i = 0; i < user.length; i++) {
user[i].onclick = function () {
this.parentNode.removeChild(this);
}
}
</script>
</body>
</html>
⑵ JS如何添加刪除div
document.createElement()是在對象中創建一個對象，要與appendChild() 或 insertBefore()方法聯合使用。
其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。
1、添加DIV
function addDiv(w,h){
//如果原來有「divCell」這個圖層，先刪除這個圖層
deleteDiv();
//創建一個div
var newdiv = document.createElement("divCell");
//添加到頁面
document.body.appendChild(newdiv);
//通過樣式指定該div的位置方式,若是想要自己設置div的位置,這句話必須有,把它注釋掉你就可以知道效果拉~試試看
newdiv.style.position="absolute";
//通過樣式指定x坐標(隨機數0~450)
newdiv.style.top= Math.round(Math.random()*450);
//通過樣式指定y坐標(隨機數0~700)
newdiv.style.left= Math.round(Math.random()*700);
//通過樣式指定寬度
newdiv.style.width=w;
//通過樣式指定高度
newdiv.style.height=h;
//通過樣式指定背景顏色,,若是背景圖片 例為 newdiv.style.backgroundImage="url(img/3.jpg)"
newdiv.style.backgroundColor="#ffffcc";
//添加div的內容
//newdiv.innerHTML=i++;
//設置樣式透明
newdiv.style.filter = "alpha(opacity=50)";
//設置ID
newdiv.id = "divCell";
}
2、刪除DIV
function deleteDiv()
{
var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
}
⑶ javascript：如何移除一個元素document.removeElement
function remove111(){
var parent = document.getElementById("");
parent.removeChild(需要抄刪除襲的元素的ID);
}
找到需要刪除元素的父節點，通過removeChild來實現
⑷ JS刪除特定的DIV求方法
你給DIV加上ID，再用JS：
document.getElementById("ID").style.display = "none";
就OK了。
運行下面的代碼：
<DIV class="post cate1 auth1" id="div1">我是DIV1</div>
<DIV class="post cate2 auth1" id="div2">我是DIV2</div>
<DIV class="post cate3 auth1" id="div3">我是DIV3</div>
<DIV class="post cate4 auth1" id="div4">我是DIV4</div>
<DIV class="post cate5 auth1" id="div5">我是DIV5</div>
<script type="text/javascript" language="javascript">
document.getElementById("div1").style.display = "none";
</script>
⑸ 怎麼通過js清空div中的內容
document.getElementById('BIGDraw').innerHTML = "";
$('#BIGDraw').html("");
清空div內容 兩種都可以
⑹ 如何清除JS創建的DIV
代碼如下：
function addDiv(w,h){
deleteDiv();
//創建一個
var my = document.createElement("divCell");
//添加到頁面
document.body.appendChild(my);
my.style.position="absolute";
//通過樣式指定x坐標(隨機數0~450)
my.style.top= Math.round(Math.random()*450);
//通過樣式指定y坐標(隨機數0~700)
my.style.left= Math.round(Math.random()*700);
//通過樣式指定寬度
my.style.width=w;
//通過樣式指定高度
my.style.height=h;
//通過樣式指定背景顏色,,若是背景圖片 例為my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc";
//添加div的內容
//my.innerHTML=i++;
//設置樣式透明
my.style.filter = "alpha(opacity=50)";
//設置ID
my.id = "divCell";
}
function deleteDiv()
{
var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
}
⑺ 用JS怎麼控制添加或刪除DIV
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> var detail_div = 1; function add_div() { var e = document.getElementById("details"); var div = document.createElement("div"); div.className = "form-group"; div.id = "details" + detail_div; div.innerHTML = e.innerHTML; document.getElementById("form").appendChild(div); detail_div++; } function del_div() { var id = "details" + (detail_div - 1).toString(); var e = document.getElementById(id) ; document.getElementById("form").removeChild(e); detail_div--; } </script> <body> <DIV id="form"> <div class="form-group" id="details"> <div class="form-inline"> DIV內容 <button type="button" class="button btn-light" id="add-btn" onclick="add_div()">添加</button> <button type="button" class="button btn-light" id="del-btn" onclick="del_div()">刪除</button> </div> </DIV> </body></html>