如何删除我从列表中输入的列表项？

Question

我可以添加和删除列表项，但是当我删除一个项目并在之后添加其他内容时，我之前删除的项目会重新添加到列表中。 我该如何解决这个问题，它将删除项目，即使我添加更多项目，它也不会将其添加到列表中？ 我很确定问题出在我的 handleDelete 函数中。 我使用 jQuery。

let skills;


const $button = $('button');
const $ul = $('ul');
const $input = $('input');



$button.on('click', handleAddSkill);
$ul.on('click', handleDelete);



init();

function init() {
    skills = [];
    render();
}

function handleAddSkill() {
    
    const skill = $input.val();
    
    if(skill) {
         
        const $skill = $(`<li><span>X</span>${skill}</li>`)
        
        skills.push($skill);
        
        $input.val('');
        )
        render()
    } else return;
}

function handleDelete() {
    $('li').click(function(){
        $(this).remove();
    });
}

function render() {
    if(!skills.length) $ul.css('margin-bottom', '30px');
    else $ul.css('margin-bottom', '0px');

    $ul.html(skills);
}

Answer 1

您的代码的问题在于handleDelete函数仅从 DOM 中删除<li> 。 它仍然存在于skills数组中，因此当您再次添加项目时，将调用render并显示skills数组中的所有项目，因此您将重新添加该列表。 以下代码段根据您的要求工作。

 let skills; const $button = $('button'); const $ul = $('ul'); const ul = document.querySelector("ul"); const $input = $('input'); $button.on('click', handleAddSkill); ul.addEventListener("click", handleDelete, true); init(); function init() { skills = []; render(); } function handleAddSkill() { const skill = $input.val(); if (skill) { const $skill = $(`<li id="${skills.length}"><span>X</span>${skill}</li>`) skills.push($skill); $input.val(''); render(); } else return; } function handleDelete() { $('li').click(function() { $(this).remove(); skills.splice(Number(this.id), 1); }); } function render() { if (!skills.length) $ul.css('margin-bottom', '30px'); else $ul.css('margin-bottom', '0px'); $ul.html(skills); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input> <button>Add</button> <ul></ul>

此外，您的代码还有另一个严重问题，目前您在<li>上单击一次它不会被删除，您需要单击它两次，这是因为当您单击<li>时没有单击侦听器它。 它与事件冒泡和捕获如何发生有关。

简而言之，首先你的程序正在寻找<li>的点击监听器，它没有找到，然后它移动到<ul>的点击监听器，在这里你实际上为<li>创建了点击监听器。 因此，下次单击它时会找到<li>单击侦听器。 要解决此问题，通过将addEventListener的第三个参数设置为 true，将<ul>的点击侦听器移动到捕获阶段。 不幸的是，您不能使用 jQuery 做到这一点，因为 jQuery 事件只能处于冒泡阶段。

如果你想阅读更多关于事件冒泡和事件捕获的内容，我推荐阅读这篇文章