Добавление удаляемых предметов из списка

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, и я не знаю, как добавить к ним атрибуты value и class.

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

Прежде всего, вы не можете добавить 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

Answer 4

Вы должны действительно работать с ним в другой структуре.

В начало 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++) { 
 
\t checkboxes[i].addEventListener('click', function() { 
 
    \t 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() { 
 
\t 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>