在帮助下,我设法从现有列表中创建添加和删除。
当我添加所需的文本时,它会得到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>
答案 0 :(得分:1)
您根本不需要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”按钮,一种不错的方法是在LI单击上分配一个.is-selected
类,在“删除”单击上分配-仅删除具有{{ 1}}类名:
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; }
对于我来说,必须向上滚动列表以仅单击“删除”按钮似乎是一个糟糕的UI,相反,这是我如何执行此任务的方法,基本上是示例1和2的混合:
<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>
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;
}