Javascript和HTML作业跟踪器。删除功能无法正常工作_Javascript_Html

Javascript和HTML作业跟踪器。删除功能无法正常工作

javascript html

Javascript和HTML作业跟踪器。删除功能无法正常工作,javascript,html,Javascript,Html,我一直在做一个家庭作业跟踪器。我现在可以添加和删除用户输入的作业项。但是，如果您通过单击“删除”按钮删除某个项目，您可以单击任何其他家庭作业项目上的任何位置，即使您没有按“删除”按钮，它也会删除该项目这是我的密码： <!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://fonts.

我一直在做一个家庭作业跟踪器。我现在可以添加和删除用户输入的作业项。但是，如果您通过单击“删除”按钮删除某个项目，您可以单击任何其他家庭作业项目上的任何位置，即使您没有按“删除”按钮，它也会删除该项目

这是我的密码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>

</head>

<body>
    <h1>Homework Tracker</h1> 

    <br>

    <div class="AddNewSub">

        <i class="material-icons" style="font-size:30px;  vertical-align: middle;">receipt</i>

            <textarea id="addhw" placeholder="Input Homework"></textarea>
            <button type="button" id="addbutton" onclick="add()"> Add </button>

    </div>
    <br>

        <div id="MainContents">

        </div>


    <script>

        var close = document.getElementsByClassName("close");
        document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon')); 


        function add() {

            var contents = document.getElementById('addhw').value;

            contents = contents.replace(/\r?\n/g, '<br />');

            var newline = document.createElement('div');
            newline.setAttribute("class", "close");
            newline.setAttribute("id", "UserConDiv")

            newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw()'>Delete</button>" + "<br>";


            document.getElementById("MainContents").appendChild(newline);
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));


        }

        function deletehw() {

            var i;
            for (i = 0; i < close.length; i++) {
              close[i].onclick = function() {
                var div = this.parentElement;
                this.parentNode.removeChild(this);
                localStorage.removeItem('UserInputCon');
                localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));

              } 

            }
        }




    </script>
</body>
</html>


作业
作业跟踪器


收据
添加


var close=document.getElementsByClassName（“close”）；
document.getElementById（“MainContents”）.innerHTML=JSON.parse（localStorage.getItem（'UserInputCon'））；
函数add（）{
var contents=document.getElementById（'addhw'）.value；
内容=内容。替换（/\r？\n/g，
）；
var newline=document.createElement（'div'）；
newline.setAttribute（“类”、“关闭”）；
newline.setAttribute（“id”、“UserConDiv”）
newline.innerHTML=“”+内容++”+“删除”+“
”；
document.getElementById（“MainContents”）.appendChild（换行符）；
localStorage.setItem（'UserInputCon'，JSON.stringify（document.getElementById（“MainContents”）.innerHTML））；
}
函数deletehw（）{
var i；
对于（i=0；i

您必须更改删除功能。此时，您正在迭代“关闭”项，但“关闭”不是按钮，而是整个家庭作业条目，因此单击其中任何一项，您将删除它们

请尝试以下代码：但是我建议您使用事件绑定，而不是直接在元素中打印onclick。你也应该使用一个模板作为你的家庭作业条目

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>

</head>

<body>
    <h1>Homework Tracker</h1> 

    <br>

    <div class="AddNewSub">

        <i class="material-icons" style="font-size:30px;  vertical-align: middle;">receipt</i>

            <textarea id="addhw" placeholder="Input Homework"></textarea>
            <button type="button" id="addbutton" onclick="add()"> Add </button>

    </div>
    <br>

        <div id="MainContents">

        </div>


    <script>

        var close = document.getElementsByClassName("close");
        document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon')); 


        function add() {

            var contents = document.getElementById('addhw').value;

            contents = contents.replace(/\r?\n/g, '<br />');

            var newline = document.createElement('div');
            newline.setAttribute("class", "close");
            newline.setAttribute("id", "UserConDiv")

            newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" + "<br>";


            document.getElementById("MainContents").appendChild(newline);
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));


        }

        function deletehw(element) {

            let container = element.parentElement;
            container.parentNode.removeChild(container);
            localStorage.removeItem('UserInputCon');
            localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
        }




    </script>
</body>
</html>


作业
作业跟踪器


收据
添加


var close=document.getElementsByClassName（“close”）；
document.getElementById（“MainContents”）.innerHTML=JSON.parse（localStorage.getItem（'UserInputCon'））；
函数add（）{
var contents=document.getElementById（'addhw'）.value；
内容=内容。替换（/\r？\n/g，
）；
var newline=document.createElement（'div'）；
newline.setAttribute（“类”、“关闭”）；
newline.setAttribute（“id”、“UserConDiv”）
newline.innerHTML=“”+内容++”+“删除”+“
”；
document.getElementById（“MainContents”）.appendChild（换行符）；
localStorage.setItem（'UserInputCon'，JSON.stringify（document.getElementById（“MainContents”）.innerHTML））；
}
函数deletehw（元素）{
让容器=element.parentElement；
container.parentNode.removeChild（容器）；
removietem（'UserInputCon'）；
localStorage.setItem（'UserInputCon'，JSON.stringify（document.getElementById（“MainContents”）.innerHTML））；
}

该代码有很多错误。查看

deletehw

。。。它有什么作用？它绑定单击处理程序。这就是你想做的吗？我不这么认为。该代码应该从列表中删除该元素，但它没有这样做。它只为函数分配

onclick

属性。将

id

属性设置为

UserConDiv

的行，可以删除将嵌套div元素的

id

设置为

contentdiv

的HTML属性，因为在DOM中具有重复的id值是无效的-在任何情况下都不需要它们。我同意，我只是将代码从复制到。还有很多其他的错误，我只是修复了一个，那是我要求的