Question

在帮助下，我设法从现有列表中创建添加和删除。

当我添加所需的文本时，它会得到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>

Answer 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;
}

如何使用类Javascript删除现有ul中的li

1 个答案: