0

Помогите изменить добавить класс на checked

var inputText= document.getElementById("inputText");
var hideShow= document.getElementById("hideShow");

ButtonAdd.addEventListener("click", function(e) {
  var inputText = document.getElementById("inputText");
  var list = document.getElementById('list');

  var check = document.createElement("input");
  check.type = "checkbox";
  check.addEventListener("click", function(e) {
    console.log(text.textContent);
  });

  var text = document.createElement("span");
  text.textContent = inputText.value;

  var label1 = document.createElement('label');

  label1.appendChild(check);
  label1.appendChild(text);
  list.appendChild(label1);
});

hideShow.addEventListener("click", function(e) {
  var checks = document.querySelectorAll("#list input[type=checkbox]:checked");
  checks.forEach(item => item.parentNode.parentNode.className="hides");
});
.hides{
    display: none;
  }
<ul id="list">
        <label class="hides">
<input type="checkbox"><span>dsfd</span>
        </label>
</ul>
<input type="text" name="" id="inputText">
<button id="hideShow">hide selected</button>
<button id="ButtonAdd">Add</button>

4
  • внутри ul должны располагаться только li либо script, template
    – Grundy
    Commented 16 янв. 2019 в 12:05
  • оно добавляет <input type="checkbox"><span>dsfd</span> и к нему нужно добавить класс hides вот так <input type="checkbox" class="hides"><span>dsfd</span> к выбранному а он добавляет его к ul
    – recile
    Commented 16 янв. 2019 в 12:07
  • checks.forEach(item => item.parentNode.parentNode.removeChild(item.parentNode)) так он удаляет выбранный элемент, а нужно добавить класс к нему что бы скрыть
    – recile
    Commented 16 янв. 2019 в 12:14
  • внутри ul <input type="checkbox"><span>текст с input</span>
    – recile
    Commented 16 янв. 2019 в 12:17

1 ответ 1

2

Внутри ul должны располагаться только li, либо script-supporting elements в которые входят <script> и <template>.


Для установки класса нужному label нужно посмотреть где расположен этот элемент относительно input.

<label class="hides">
    <input type="checkbox"><span>dsfd</span>
</label>

Из разметки видно, что label является родительским элементом, следовательно, для доступа к нему нужно использовать parentNode

item.parentNode.className="hides"
3
  • оно к выбранному добавляет, но и к ul тоже в итогу все скрывается через item.parentNode.className="hides"
    – recile
    Commented 16 янв. 2019 в 12:26
  • @recile, если item - это input, item.parentNode никак не может быть ul, следовательно это делает другой код. Например тот, который у тебя в вопросе, вполне добавляет ul
    – Grundy
    Commented 16 янв. 2019 в 12:29
  • блин точно у меня был еще один код) Спасибо большое
    – recile
    Commented 16 янв. 2019 в 12:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.