Javascript 添加和删除列表中的项目

我有一个简单的问题。谷歌对此进行了大量搜索，但未能找到合适的解决方案。我有一个基于5个复选框的列表

abc.html

<li id="DisplaySelection">  </li> 
{{form.Test1 }}   //checkbox1 
.... 
{{form.Test5 }}  //checkbox5

{{form.Test1}}//checkbox1
.... 
{{form.Test5}}//checkbox5

main.js

document.getElementById('Test1').onclick = function() {
    if ( this.checked )  {
        var word = 'Selection1';    
        document.getElementById('DisplaySelection').innerHTML +=   ('<li>'+word+'</li>');
    }
    else {
        //  remove same word from list
    }
}

document.getElementById('Test5').onclick = function() {
    if ( this.checked )  {
        word = 'Selection5';
        document.getElementById('DisplaySelection').innerHTML += ('<li>'+word+'</li>');
     }
     else
         //  remove from list
     }
}

document.getElementById（'Test1'）。onclick=function（）{
如果（选中此项）{
变量词='Selection1'；
document.getElementById（'DisplaySelection'）.innerHTML+=（'
'+word+'
'）；
}
否则{
//从列表中删除相同的单词
}
}
document.getElementById（'Test5'）。onclick=function（）{
如果（选中此项）{
word='Selection5'；
document.getElementById（'DisplaySelection'）.innerHTML+=（'
'+word+'
'）；
}
其他的
//从列表中删除
}
}

我想完成删除部分。也就是说，如果复选框未选中，则从列表中删除该项。我怎样才能让它工作？是的，我是JavaScript的新手

谢谢你的回答，但问题是我有Django表单字段，而不是html，我不知道如何为它们添加值和类属性

else{
   else{
       var str= document.getElementById('DisplaySelection').innerHTML;      
       document.getElementById('DisplaySelection').innerHTML = str.Replace("<li>"+word+"</li>","");        

    }

var str=document.getElementById（'DisplaySelection'）.innerHTML；
document.getElementById（'DisplaySelection'）.innerHTML=str.Replace（“
”+word+”
“，”）；
}

---

请尝试上面的代码。

首先，您不能在

li

元素中附加

li

还请注意，您必须为要附加的

li

具有唯一的选择器，以便可以使用它删除元素

cb

类被赋予所有复选框，以便我们可以在

循环中附加事件。对于
单击的
复选框
也更喜欢
更改
事件

试试这个例子：


var cbElems=document.querySelectorAll（'.cb'）；
var onChnageListener=函数（）{
如果（选中此项）{
document.getElementById（'DisplaySelection'）.innerHTML+='
“+this.name+'
”；
}否则{
var elem=document.getElementById（this.name）；
elem.parentNode.removeChild（elem）；
}
};
[]forEach.call（cbElems，function（cb）{
cb.添加的事件监听器（“变更”，一旦发生）；
});

您真的应该在另一个结构中解决这个问题

从HTML开始。为所有复选框指定相同的类名，并将选中的“word”存储为某些数据属性：

<input type="checkbox" class="check" data-word="For starters: selection #one">

完成此操作后，需要为循环中的所有复选框绑定click事件：

for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function() {
        var word = this.getAttribute('data-word');
        if (this.checked) {
            selected.push(word);
        } else {
            selected.splice(selected.indexOf(word), 1);
        }
        document.getElementById('DisplaySelection').innerHTML = renderSelected();
    });
}

for（变量i=0；i

在这里，您可以将新单词推送到所选单词列表中，也可以将其从列表中删除

最后，您只需要按照您想要的方式进行渲染。此功能委托给单独的功能，例如：

function renderSelected() {
    return '<li>' + selected.join('</li><li>') + '</li>'
}

函数renderSelected（）{
返回选定的“
”+加入（“
”）+“
”
}

最终结果：


var checkbox=document.querySelectorAll（'.check'）；
所选var=[]；
对于（变量i=0；i”+加入（“
”）+“
”
}
对于初学者

还有一项

还有别的事吗

我想你需要一些这样的东西


var classname=document.getElementsByClassName（'item'）；
对于（var i=0；i”+this.value+''；
}否则{
var elem=document.getElementById（this.value）；
elem.parentNode.removeChild（elem）；
}
}
所选项目


选择项目


项目1

项目2

项目3

请提供一把小提琴。我不明白你到底想要什么，试着用完整的例子来解释：）谢谢你的回答。虽然我使用Django实现表单，但我使用的复选框不是列表的一部分，默认情况下，我所有的复选框都已选中，我可以对上面的内容进行一些修改并使用它。！它很有效。很高兴能帮助您：）\
function renderSelected() {
    return '<li>' + selected.join('</li><li>') + '</li>'
}