TODO删除功能不起作用

时间:2018-07-12 08:10:57

标签: javascript html

我无法删除待办事项列表中新添加的项目。下面是我的JavaScript代码。

2018-07-12 10:29:05.249  INFO 17299 --- [           main] c.c.c.ConfigServicePropertySourceLocator : Fetching config from server at : http://localhost:8888
2018-07-12 10:29:05.457 DEBUG 17299 --- [           main] o.s.web.client.RestTemplate              : Created GET request for "http://localhost:8888/configclient/default"
2018-07-12 10:29:06.023 DEBUG 17299 --- [           main] o.s.web.client.RestTemplate              : Setting request Accept header to [application/json, application/*+json]
2018-07-12 10:29:06.092 DEBUG 17299 --- [           main] s.n.www.protocol.http.HttpURLConnection  : sun.net.www.MessageHeader@3bb6b7e25 pairs: {GET /configclient/default HTTP/1.1: null}{Accept: application/json, application/*+json}{User-Agent: Java/10.0.1}{Host: localhost:8888}{Connection: keep-alive}
2018-07-12 10:29:06.121 DEBUG 17299 --- [           main] s.n.www.protocol.http.HttpURLConnection  : sun.net.www.MessageHeader@3b1892d05 pairs: {null: HTTP/1.1 400}{Content-Type: application/json;charset=UTF-8}{Transfer-Encoding: chunked}{Date: Thu, 12 Jul 2018 08:29:06 GMT}{Connection: close}
2018-07-12 10:29:06.145 DEBUG 17299 --- [           main] o.s.web.client.RestTemplate              : GET request for "http://localhost:8888/configclient/default" resulted in 400 (null); invoking error handler
2018-07-12 10:29:06.162  WARN 17299 --- [           main] c.c.c.ConfigServicePropertySourceLocator : Could not locate PropertySource: 400 null

1 个答案:

答案 0 :(得分:0)

希望我的代码对您有所帮助。如果您有任何疑问,请问我-写评论。

var deletes = document.querySelectorAll('.delete'),
    dones = document.querySelectorAll('.done');
    
//convert NodeList to array for IE
deletes = [].slice.call(deletes, 0);
dones = [].slice.call(dones, 0);

deletes.forEach(function(removeTodo)
{
    removeTodo.addEventListener('click', function()
    {
        var li = removeTodo.parentNode;
        li.parentNode.removeChild(li);
    });
});

dones.forEach(function(doneTodo)
{
    doneTodo.addEventListener('click', function()
    {
        var elStyle = this.previousElementSibling.style,
            value = elStyle.textDecoration;

        elStyle.textDecoration = value == 'line-through' ? 'none' : 'line-through';
        this.title = value != 'line-through' ? 'to do' : 'done';
    });
});
li{margin:5px 0}
li span
{
    display:inline-block;
    white-space:nowrap;
    width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle
}
.delete
{
    border:2px solid #f99;
    color:#f99;
    background-color:#fdd;
}
.done
{
    border:2px solid #6f6;
    color:#6f6;
    background-color:#dfd;
}
.done,.delete
{
    border-radius:50%;
    display:inline-block;
    line-height:12px;
    cursor:pointer;
}
<ul>
    <li><span>Child 1 – "Buy fruits"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
    <li><span>Child 2 – "Meet parents"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
    <li><span>Child 3 – "Read a book"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
    <li><span>Child 4 – "Organize office"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
    <li><span>Child 5 – "Hit the gym"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
    <li><span>Child 6 – "Pay bills"</span> <b class="done" title="done">&#x2714;</b> <b class="delete" title="delete">&#10799;</b></li>
</ul>