JQuery 添加一次按钮到列表项

Question

只要用户按下“添加项目”按钮，我就会将项目添加到列表中。发生这种情况时，应使用 JQuery 添加列表项。另外还有一个功能就是为每个列表项添加一个删除按钮，这样就可以删除列表项了。

我的问题是，每次按下“添加项目”按钮时，都会触发 addDeleteButton 函数，从而添加大量删除按钮。我的 addDeleteButton 获取所有列表项的 JQuery 对象并循环遍历它们。该循环将查找现有的删除按钮，如果当前没有删除按钮，则只添加一个删除按钮。但是我似乎找不到写这个条件的正确方法。如何保证只有在没有上一个按钮的情况下才添加删除按钮？

//gets element with id list so items can be appended to it
let list = $('#list');

//adds a delete button to the li element (only one button added per li)
function addDeleteButton() {
  let li = $('li');
  let button = '<button>delete</button>';
  //this condition should limit the number of buttons added to each li
  if (li.children(button) < 1) {
    li.append(button);
  }
}

//function adds new item to list
function addListItem() {
  let li = '<li>' + input.val() + '</li>';
  list.append(li);
  addDeleteButton();
}

//listens for a click of the "Add" button which triggers list item to be added to list
$('#addLiButton').on('click', addListItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="list">
  <input type="text" name="item" id="input" />
</form>

<div id="addLiButton">Add Item</div>
<ol id="list"></ol>

Answer 1

您可以使用 $('li:last') 添加最后一个 li，然后检查 li 中按钮的长度是否为 0 然后仅添加删除按钮。

演示代码 :

let list = $('#list');
let input = $('#input');

function addDeleteButton() {
  let li = $('#list li:last'); //get last li added
  let button = '<button>delete</button>';
  //then check if the li doesnot has button in it
  if (li.find("button").length == 0) {
    li.append(button); //add that inside button
  }
  //or directly append button i.e : li.append(button); 
}

function addListItem() {
  let li = '<li>' + input.val() + '</li>';
  list.append(li);
  addDeleteButton();
}

$('#addLiButton').on('click', addListItem);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="list">
  <input type="text" name="item" id="input" />
</form>

<div id="addLiButton">Add Item</div>
<ol id="list"></ol>

JQuery 添加一次按钮到列表项

JQuery Add Button once to List Items

iteration

jquery

loops

list