在帮助下，我设法从现有列表中创建添加和删除。
当我添加所需的文本时，它会显示，id因此我以后可以将其删除。现有清单的问题是如果我不设置手册便无法删除它id。当我单击该元素时，该如何获取<strong>并获取class；当我单击删除时，该如何删除。你能为我指出正确的方向吗？
function addItem() {
var ul = document.getElementById("list");
var txt = document.getElementById("txt");
var li = document.createElement("li");
li.setAttribute('id', txt.value);
li.appendChild(document.createTextNode(txt.value));
ul.appendChild(li);
}
function removeItem() {
var ul = document.getElementById("list");
var txt = document.getElementById("txt");
var item = document.getElementById(txt.value);
ul.removeChild(item);
}<input type="text" id="txt" />
<button onclick="addItem()">Add</button>
<button onclick="removeItem()">Remove</button>
<ul id="list">
<li id="element1">element1</li>
<li>element2</li>
<li>element3</li>
<li>element4</li>
</ul>您根本不需要ID。
在创建LI时，添加一个Remove按钮。单击该按钮时，将查找其最接近的LI元素并将其删除。
这样，并且不将输入值与ID相关联-您可以输入所需的任何文本，即使有空格也可以：
const $add = $("#add"),
$txt = $("#txt"),
$list = $("#list");
function newListItem() {
const $remove = $("<button>", {
text: "×",
title: "Remove item",
on: {
click() {
$(this).closest("li").remove();
}
}
});
return $("<li>", {
text: $txt.val(),
append: $remove,
prependTo: $list,
ready() {
$txt.val(""); // Clear input value once LI is ready
}
});
}
$add.on("click", newListItem)li button {border-radius:50%; border:0; margin-left:10px; cursor:pointer;}<input type="text" id="txt">
<button id="add">Add</button>
<ul id="list"></ul>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>如果要突出显示所需的li并有一个REMOVE按钮，一个不错的方法是.is-selected在LI单击上分配一个类，在Remove单击上分配一个类-仅删除具有is-selected类名的类：
const $add = $("#add"),
$remove = $("#remove"),
$txt = $("#txt"),
$list = $("#list");
function newListItem() {
return $("<li>", {
text: $txt.val(),
prependTo: $list,
ready() {
$txt.val(""); // Clear input value once LI is ready
}
});
}
// Manage LI selections for Removal
$list.on("click", "li", function() {
$list.find("li").not(this).removeClass("is-selected");
$(this).addClass("is-selected");
});
function removeListItem() {
const $selected = $list.find("li.is-selected");
if(!$selected.length) return alert("Select an item to remove");
$selected.remove();
}
$add.on("click", newListItem);
$remove.on("click", removeListItem);li.is-selected{ outline: 2px solid #0bf; }<input type="text" id="txt">
<button id="add">Add</button>
<button id="remove">Remove</button>
<ul id="list">
<li>Select me and click Remove</li>
<li>I'm another to-do item</li>
</ul>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>在我看来，必须向上滚动列表以仅单击“删除”按钮似乎是一个糟糕的UI，相反，这是我处理此任务的方式，基本上是示例1和示例2的混合：
const $add = $("#add"),
$txt = $("#txt"),
$list = $("#list"),
$remove = $("<button>", {
text: "Remove",
on: {
click() {
const $li = $(this).closest('li.is-selected');
$(this).detach();
$li.remove();
}
}
});
function newListItem() {
return $("<li>", {
text: $txt.val(),
prependTo: $list,
ready() { $txt.val(""); } // Clear input value once LI is ready
});
}
// Manage LI selections for Removal
$list.on("click", "li", function() {
$list.find("li").not(this).removeClass("is-selected");
$(this).addClass("is-selected").append( $remove ); // Append our Remove button
});
$add.on("click", newListItem)li {
position: relative;
cursor: pointer;
line-height: 1.4em;
}
li.is-selected {
background: rgba(100,200,255,0.2);
}
li.is-selected button { /* Show Remove button on LI select */
display: block;
position: absolute;
right: 0;
top: 0;
}<input type="text" id="txt">
<button id="add">Add</button>
<ul id="list">
<li>Select me and click Remove</li>
<li>I'm another to-do item</li>
</ul>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句