使用javascript動態添加和刪除div在div內的x按鈕上動態添加和刪除

-3

在html頁面上單擊添加按鈕時，應該在html頁面上顯示div，並在多次點擊中顯示多個div。每個div應該有X圖標，點擊x時，div應該從UI消失。此外，它應該保持動態生成的div元素的id數組，這些元素應該在控制檯上顯示，並且只要刪除了特定的div，就應該刪除該id。使用javascript動態添加和刪除div在div內的x按鈕上動態添加和刪除

這段代碼工作正常，但不使用計數器我可以使用數組，其中每當創建div時將生成動態id，並在刪除div時刪除id。

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 

<p>Click the button to make a Division element.</p> 

<button id="button" onclick="myFunctionAdd()">Add</button> 

<div id="myDIV"> 
</div> 

<script> 

var counter=1; 
function myFunctionAdd() 
    { 

    var x = document.createElement("DIV"); 
    x.id="div" 

    var divNumber = counter; 
    counter++; 
    console.log("Div Number: "+ divNumber + " is created"); 

    var z= document.createElement("button"); 
    z.id="btn"; 
    x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;"); 
    z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;"); 


    x.appendChild(z); 
    document.body.appendChild(x).appendChild(z); 

    z.onclick = function remove(btn) 
    { 

    console.log("Div Number: "+ divNumber + " is deleted"); 
    x.parentElement.removeChild(x); 
    } 

    } 


</script> 

</body> 
</html>

來源

2017-07-20 maggie

請仔細閱讀本和AKS再次https://stackoverflow.com/help/how-to-ask – Doomenik

那你試試？你在網上搜索過嗎？我確信這個答案几十次 – Kaddath

你有什麼感覺累了，失敗了嗎？如果是的話，請在代碼請... –

見這個例子：https://codepen.io/dsomekh/pen/GEVNWb

function Clone() { 
 

 

 
    var clone = document.getElementById('thediv').cloneNode(true); // "deep" clone 
 
    document.getElementById("container").appendChild(clone); 
 
} 
 

 
function Delete(button) { 
 
    var parent = button.parentNode; 
 
    var grand_father = parent.parentNode; 
 
    grand_father.removeChild(parent); 
 
}

.mydiv { 
 
    border: 2px solid red; 
 
}

<div class="container" id="container"> 
 
    <div class="mydiv" id="thediv"> 
 
    I am the div 
 
    <button type="button" onclick="Clone()") ">Clone</button> 
 
    \t \t <button type="button " onclick="Delete(this) ")">Delete</button> 
 
    </div> 
 
    <div>

來源

2017-07-20 12:01:13

也在這段代碼我想在控制檯中顯示控制檯中每個div的唯一標識，並且每當刪除特定的div時應刪除該標識。 – maggie

試試這個

function adddiv() { 
 
    document.body.innerHTML += '<div id=' + Math.random() + '><button id="btn" onclick=closediv(this)>X</button>' + Math.random() + '</div>'; 
 
} 
 

 
function closediv(e) { 
 
    var par = $(event.target).parent(); 
 
    par.remove(); 
 
}

div { 
 
    border: solid 1px red; 
 
    width: 150px; 
 
    height: 100px; 
 
    margin: 2px; 
 
} 
 

 
#btn { 
 
    clear: both; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add" onclick=adddiv()>Add</button>

現在所有DIV與唯一ID和使用JavaScript創建

來源

2017-07-20 12:04:29 Bhargav

也在這段代碼中，我想在控制檯中顯示控制檯中每個div的唯一標識，並且每當刪除特定的div時應刪除該標識。 – maggie

我已經更新我的答案現在div生成與唯一ID檢查它@maggie – Bhargav

這本來會更好，如果這個答案是在JavaScript中提供，因爲我知道jquery :) – maggie

使用javascript動態添加和刪除div在div內的x按鈕上動態添加和刪除

回答

相關問題