Javascript 当我在页面上单击项目时，它们不会消失_Javascript_Html_Css

Javascript 当我在页面上单击项目时，它们不会消失

javascript html css

Javascript 当我在页面上单击项目时，它们不会消失,javascript,html,css,Javascript,Html,Css,好的，最后我几乎完成了本教程的最后一部分，我可以单击跨度上的项目使它们消失，我正在单击它们，它们不会消失。有人知道为什么吗？这是我的密码 <!doctype html> <html> <head> <title>To do list with html and javascript</title> <style> ul { list-style: none; padding: 0; ma

好的，最后我几乎完成了本教程的最后一部分，我可以单击跨度上的项目使它们消失，我正在单击它们，它们不会消失。有人知道为什么吗？这是我的密码

 <!doctype html>
<html>
    <head>

    <title>To do list with html and javascript</title>
    <style>
     ul { list-style: none; padding: 0; margin: 0; width: 400px;}
     li { border: 1px solid #ccc; background: #eee; padding: 10px 15px; color: #000; }
     li span { padding-left: 10px;}
     .checked { text-decoration: line-through; font-weight: bold; color: #c00;}
        </style>
    </head>
    <body>
<h1>To Do List</h1>
<p><input type="text" id="inItemText"/></p> 

<ul id="todolist">
</ul>



<script src="todo.js"></script>
    </body>
</html>

您的代码中似乎有输入错误。

replace

方法接受由

逗号分隔的两个参数。在您的代码中有一个+
符号，而不是，

使用下面的代码
你能用CSS和其他东西快速组合一个JSFIDLE吗？
function updateItemStatus() {
    var cbId = this.id.replace("cb_","");
    var itemText = document.getElementById("item_" + cbId);

    if (this.checked) {
        itemText.className = "checked";
    } else {
        itemText.className = "";
    }
}

function removeItem() {
    var spanId = this.id.replace("item_" + "");
    document.getElementById("li_" + spanId).style.display = "none";

}



function addNewItem(list, itemText){

    var date = new Date();
    var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds(); 

    var listItem = document.createElement

("li");
        listItem.id = "li_" + id;
        var checkBox = document.createElement ("input");
        checkBox.type = "checkbox";
        checkBox.id = "cb_" + id;
        checkBox.onclick = updateItemStatus;


        var span = document.createElement("span");
        span.id = "item_" + id;
        span.innerText = itemText;
        span.onclick = removeItem;


        listItem.appendChild(checkBox);
        listItem.appendChild(span);

        list.appendChild(listItem);

    }


    var inItemText = document.getElementById("inItemText");
    inItemText.focus();
    inItemText.onkeyup = function(event) {


        if (event.which == 13) {
            var itemText = inItemText.value;

            if (!itemText || itemText == "undefined") {
                return false;
            }

            addNewItem(document.getElementById("todolist"), itemText);

            inItemText.focus();
            inItemText.select();
        };

}

function removeItem() {
    var spanId = this.id.replace("item_", ""); //Note the change
    console.log(this.id + spanId);
    document.getElementById("li_" + spanId).style.display = "none";

}