純JS實(shí)現(xiàn)將動(dòng)態(tài)生成的元素按下標(biāo)指定刪除？

想實(shí)現(xiàn)一個(gè)效果
頁(yè)面是空的
點(diǎn)擊＋號(hào) 加DIV ，
然后點(diǎn)擊這些生成的div中的任意一個(gè) ，彈出下標(biāo) 該怎么弄？
附上我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #container{
        width: 800px;
        height: 500px;
        border: 1px solid #ddd;
        margin: 100px auto;
    }
    .square{
        width: 100px;
        height: 100px;
        background: #5B9BD5;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        margin: 40px 0 0 40px;
        float: left;
        cursor: pointer;
    }
    #btn1{
        width: 100px;
        height: 100px;
        border: 1px dashed #000;
        font-size: 50px;
        font-weight: bold;
        cursor: pointer;
        line-height: 100px;
        text-align: center;
        margin: 40px 0 0 40px;
        float: left;
    }
    .alert{
        width: 100%;
        height: 100%;
        background: #ccc;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }
    .alert div{
        width: 600px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 3;
        border: 1px solid #000;
        background: #fff;
    }
    .alert input{
        width: 100px;
        
    }
</style>

</head>
<body>


<div id="container">
    <div id="btn1">+</div>
</div>
<div class="alert" style="display: none">
    <div>
            <input type="text" >
            <button onclick="back()">取消</button>
            <button onclick="add()">確定</button>
    </div>
    
</div>
<script type="text/javascript">
    var btn1=document.getElementById('btn1');
    var ct=document.getElementById('container');
    var al=document.getElementsByClassName('alert')[0];
    var res=document.getElementsByTagName('input')[0];
    var sq_arr=[];
    var number=0;
    btn1.onclick=function(){
        if(number>13){
            return
        }else{
            // createSQ();
            al.style.display="block";
        }
        
    }
    
    function add(){
        var sValue=res.value;
        al.style.display="none";
        createSQ(sValue);
    }
    function back(){
        al.style.display="none";
    }

    function createSQ(value){
        
        var ndiv=document.createElement('div');
        ndiv.setAttribute("class",'square');
        ndiv.innerHTML=value;
        // ct.insertBefore(ndiv,btn1)
        sq_arr.push(number);
        ct.insertBefore(ndiv,btn1);
        number++;
        console.log(sq_arr);
    }

    // 獲取所有的div
    var aSq=document.getElementsByClassName('square');
    for(let i=0;i<aSq.length;i++){
        aSq[i].addEventListener("click",function(){
            console.log('123');
        })
    }

   
    
</script>

</body>
</html>

回答

編輯回答

孤酒

createSQ里面的div需要添加點(diǎn)擊事件，你原來(lái)寫(xiě)的click事件對(duì)于新增的div是沒(méi)有用的

2017年6月17日 13:35

編輯回答

維他命

    function createSQ(value){
        var ndiv=document.createElement('div');
        ndiv.setAttribute("class",'square');
        ndiv.setAttribute("name",""+ number +"");
        ndiv.innerHTML=value;
        sq_arr.push(number);
        ct.insertBefore(ndiv,btn1);
        number++;
        ndiv.addEventListener("click",function(){
            console.log(ndiv.attributes["name"].value);
        })
    }

看看這個(gè)是不是你想要的

2018年4月23日 17:52

編輯回答

話寡

// 獲取所有的div
        var aSq = document.getElementsByClassName('square');
        for (let i = 0; i < aSq.length; i++) {
            aSq[i].addEventListener("click", function () {
                console.log('123');
            })
        }

放到function createSQ（）里不就行了
整個(gè)功能的效果你都能寫(xiě)出了這個(gè)你想不到？

2018年9月15日 16:12