时间戳

首页 > 解决方案 > JQuery将按钮一次添加到列表项

jquery - JQuery将按钮一次添加到列表项

问题描述

每当用户按下“添加项目”按钮时，我都会将项目添加到列表中。发生这种情况时，应使用 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>

标签： jquerylistloopsiteration

解决方案

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

演示代码：

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>

推荐阅读