[英]Knockout - Give class to one <li> element in a foreach <ul> with <li> elements
[英]how to select or give a class name to createTextNode() tekst inside Li elements
我做了一個購物清單,現在我想點擊它時刪除這些物品。 當我現在單擊它時,整個 li 項目被刪除(標記和deletebutton
按鈕現在被刪除)。 我想給我在這個腳本中創建的列表項中的 tekst 一個 class,但我無法讓它工作。 這是制作列表項的腳本:
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
li.classList.add("tekstje");
ol.appendChild(li);
input.value = "";
var delBtn = document.createElement("BUTTON"); // Create a <button> element
delBtn.classList.add("deletebtn"); // Give a class name
delBtn.innerHTML = "X"; // Insert text
li.appendChild(delBtn); // Append <button> to <LI>
}
我嘗試了classlist.add
方法並給它一個 P class,但這似乎不起作用。 我還嘗試使用:tekst 選擇它
覆蓋內部按鈕上的 CSS。 或者,只需用 span 將文本包裝在li
中,然后只在span
上添加刪除線。
var ol = document.getElementById("theOl"); var input = document.getElementById("theInput"); function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); li.classList.add("tekstje"); ol.appendChild(li); input.value = ""; var delBtn = document.createElement("BUTTON"); // Create a <button> element delBtn.classList.add("deletebtn"); // Give a class name delBtn.innerHTML = "X"; // Insert text delBtn.onclick = function () { delBtn.parentNode.classList.add("all-done"); } li.appendChild(delBtn); // Append <button> to <LI> }
.all-done { text-decoration: line-through; }.all-done button { text-decoration: none; }
<ol id="theOl"></ol> <input id="theInput" value="test"> <button onclick="createListElement()">Add</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.