在 js小demo：点击后选中进行删除 的问题

Question

想实现一个这样的功能，选中一个div后点击删除，就可以删除这个div
本来以为这个功能很简单但是我好像被绕进去了...
由于是非科班自学前端，所以身边也没有相关的大佬能够请教，所以就来麻烦网上的大佬们辣！（谢谢呜呜呜）

相关代码：

 <div id="container">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <br>
        <button id="delete">删除</button>
</div>

//感觉把自己绕进去了？？
    function deleteFunc(parent,deleted,options){
        var parentDiv = document.getElementById(parent),
            deletedDiv = parentDiv.getElementsByClassName(deleted)[0];
            
        parentDiv.removeChild(deletedDiv);
        if(!options.msg){
            console.log("deletion finished");
        }else{
            console.log(options.msg);
        }
    };

    function chose(child){
        return $(child).prop("class");
    }
//
    $("#container>div").click(function (){
        var childClass = chose(this);
        $("button#delete").click(function(){
            deleteFunc("container",childClass,{
            msg:''
                })
            })
        });

（jQuery和原生js有点混了..实在把自己绕进去了）
试了很多，主要遇到的问题是

childClass的值会在第一次点击后锁定为第一次点击的div的class值，后续再点击div后点删除就会报错...
感觉（自我感觉）需要用call()来完成，但是由于也不太熟悉的原因也会报错，甚至第一次删除都无法完成..

还请大佬们不吝赐教！

Answer 1

const container = document.getElementById('container')
const deleted = document.getElementById('deleted')
container.addEventListener('click', function (e) {
    const target = e.target
    if (target.tagName.toLowerCase === "div") {
        target.classList.add('delete')
    }
    return false
})
deleted.addEventListener('click', function(e) {
    const deletes = document.getElementByClassName('delete')
    for(var i = 0; i < deletes.length ; i++) {
        const delete = deletes[i]
        delete.parentNode.removeChild(delete)
    }

})

把要准备删除的项目添加 delete 类名,除了方便后续操作后,还可以添加 css 来让待删除的项目样式不同