0

我可以添加和删除列表项，但是当我删除一个项目并在之后添加其他内容时，我之前删除的项目会重新添加到列表中。如何将其修复到它将删除项目的位置，即使我添加更多项目也不会将其添加到列表中？我很确定问题出在我的 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);
}
4

1 回答 1

1

您的代码的问题是该函数仅从DOMhandleDelete中删除。<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>。<ul>要解决此问题，请通过将第三个参数设置addEventListener为 true来将点击侦听器移动到捕获阶段。不幸的是，你不能使用 jQuery 来做到这一点，因为 jQuery 事件只能处于冒泡阶段。

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

于 2020-11-01T04:36:34.840 回答