添加从列表中删除的项目

Question

我有一个简单的问题。谷歌搜索了很多，但找不到合适的解决方案。我有一个基于 5 个复选框的列表。

abc.html

<li id="DisplaySelection">  </li> 
{{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
     }
}

我想完成删除部分。也就是说，如果未选中该复选框，则从列表中删除该项目。我如何让这个工作？是的，我是 JavaScript 新手。

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

Answer 1

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

var classname = document.getElementsByClassName('item');

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', myFunction);
}

function myFunction() {
  if (this.checked) {
    document.getElementById('selectedItems').innerHTML += '<li id="' + this.value + '">' + this.value + '</li>';
  } else {
    var elem = document.getElementById(this.value);
    elem.parentNode.removeChild(elem);
  }
}

<h4>Selected Items</h4>
<ul id='selectedItems'>
</ul>
<div>
  <h4>Select Items</h4>
  <ul>
    <li>
      <input type='checkbox' value='item1' class='item'>Item1</li>
    <li>
      <input type='checkbox' value='item2' class='item'>Item2</li>
    <li>
      <input type='checkbox' value='item3' class='item'>Item3</li>
  </ul>
</div>

Answer 2

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

    }

试试上面的代码。

Answer 3

你真的应该在另一个结构中解决它。

从 HTML 开始。为所有复选框赋予相同的类名并将选中的“单词”存储为某些数据属性：

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

然后您将能够一次选择所有复选框：

var checkboxes = document.querySelectorAll('.check');

完成后，您需要为循环中的所有复选框绑定点击事件：

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();
    });
}

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

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

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

最终结果：

var checkboxes = document.querySelectorAll('.check');
var selected = [];

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();
    });
}

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

<input type="checkbox" class="check" data-word="For starters: selection #one"> For starters <br>
<input type="checkbox" class="check" data-word="One more item: another"> One more item <br>
<input type="checkbox" class="check" data-word="Also something else"> Something else <br>

<ul id="DisplaySelection"></aul>

Answer 4

首先，你不能在li元素中附加li。

还请注意，您必须有一个唯一的 li 选择器，以便您可以使用它来删除元素。 cb 类被赋予所有复选框，以便我们可以在 loop 中附加事件。也更喜欢change 事件为checkboxes 而click

试试这个例子：

var cbElems = document.querySelectorAll('.cb');
var onChnageListener = function() {
  if (this.checked) {
    document.getElementById('DisplaySelection').innerHTML += '<li id="' + this.name + '">' + this.name + '</li>';
  } else {
    var elem = document.getElementById(this.name);
    elem.parentNode.removeChild(elem);
  }
};
[].forEach.call(cbElems, function(cb) {
  cb.addEventListener('change', onChnageListener);
});

<input type='checkbox' name='Test1' class='cb'>
<input type='checkbox' name='Test2' class='cb'>
<input type='checkbox' name='Test3' class='cb'>
<input type='checkbox' name='Test4' class='cb'>
<input type='checkbox' name='Test5' class='cb'>
<ul id="DisplaySelection"></ul>

Fiddle here