简体   繁体   English

如何下载用户创建的元素并给它一个事件?

[英]how to download an element created by the user and give it an event?

how to download an element created by the user and give it an event?如何下载用户创建的元素并给它一个事件?

function tasks(e) {
    inputV = input.value;
    e.preventDefault();
    if (inputV !== "") {
        const ul = document.querySelector('.tasks-list');
        let li = document.createElement('li');
        li.innerHTML += inputV /*`<button class="deleteTasks">Usuń</button>`*/;
        ul.appendChild(li);
        let btnDell = document.createElement('button');
        btnDell.setAttribute("id", "deleteTasks");
        btnDell.innerHTML += 'usuń';
        li.appendChild(btnDell);
        input.value = "";
    }
};
add.addEventListener('click', tasks);

If I get it well you want your btnDell to delete the li element.如果我明白了,您希望您的 btnDell 删除 li 元素。 You should use something like on the button click你应该在按钮点击上使用类似的东西

function removeParent(e){
   e.parentNode.remove();
}

After creation of new list Element, you can attach your custom event handler.创建新列表元素后,您可以附加自定义事件处理程序。

function tasks(e) {
    inputV = input.value;
    e.preventDefault();
    if (inputV !== "") {
        const ul = document.querySelector('.tasks-list');
        let li = document.createElement('li');
        li.innerHTML += inputV /*`<button class="deleteTasks">Usuń</button>`*/;
        let node = ul.appendChild(li).cloneNode(true);
        node.addEventListener('click',(e)=>{
            e.preventDefault();
            let target = e.target;
            // put your logic here to execut on target after it being clicked
        },false); 
        let btnDell = document.createElement('button');
        btnDell.setAttribute("id", "deleteTasks");
        btnDell.innerHTML += 'usuń';
        li.appendChild(btnDell);
        input.value = "";
    }
};
add.addEventListener('click', tasks);

Edit I am editing this after reading your comment, please edit your question instead of put a comment to clarify your question.编辑我在阅读您的评论后正在编辑此内容,请编辑您的问题而不是发表评论以澄清您的问题。 My assumption was that you want this functionality.我的假设是你想要这个功能。

But it seems you'r logic on delete don't get execute on newly created items, if that's the case try to set a class property on each deletable li and write btnDell base on querySelectorAll that get all the elements at the time it's getting execute.但似乎您的删除逻辑不会在新创建的项目上执行,如果是这种情况,请尝试在每个可删除的li上设置 class 属性并基于querySelectorAll编写 btnDell 以在执行时获取所有元素.

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM