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

林不渡
  • 44

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

clipboard.png
相关代码:

 <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有点混了..实在把自己绕进去了)
试了很多,主要遇到的问题是
clipboard.png
childClass的值会在第一次点击后锁定为第一次点击的div的class值,后续再点击div后点删除就会报错...
感觉(自我感觉)需要用call()来完成,但是由于也不太熟悉的原因也会报错,甚至第一次删除都无法完成..

还请大佬们不吝赐教!

回复
阅读 1.4k
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 来让待删除的项目样式不同

宣传栏