0

Помогите разобраться. https://jsfiddle.net/6npssxa9/ Нужно при клике на крестик(.close) удалить соответствующий li

//Функция при нажатии ""записать""
function write() {
  var newLi = document.createElement('li');
  newLi.innerHTML = document.getElementById("inp").value;
  var inputValue = document.getElementById("inp").value;
  var iv = document.createTextNode(inputValue);
  if (inputValue === '') {
    alert("Введите Дело !");
  } else {
    document.getElementById("quest").appendChild(newLi);
  }
  document.getElementById("inp").value = "";
  document.getElementById('del').style.display = 'block';
  newLi.className = 'draggable';

  //Создание крестика для удаления одного дела 
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  newLi.appendChild(span);
  return;
}

//обработчик клик удаления одного дела    
var close = document.getElementById("quest");
closes = function() {
  this.target.parentNode.removeChild(li);
}
close.addEventListener('click', closes)




//Функция при нажатии ""Удалить Все""
function del() {
  document.getElementById("quest").innerHTML = "";
  document.getElementById('del').style.display = 'none';
  return;
}

//События при нажатии на кнопки
document.getElementById('btn').addEventListener('click', write);
document.getElementById('del').addEventListener('click', del);
2
  • 2
    есть какие объективные причины не использовать jquery к примеру? зы: оработчика ваш навешивается при старте, когда добавленных элементов еще нет (к одному элементу). к вновь созданным элементам он отношения не имеет.
    – teran
    14 фев 2018 в 23:44
  • @teran, проблема ещё и в том, что обработка навешивается не на кнопку удаления, а на весь список 14 фев 2018 в 23:49

1 ответ 1

0

Устанавливайте обработчик правильному элементу и делайте это при его создании:

//Функция при нажатии ""записать""
function write() {
  var newLi = document.createElement('li');
  newLi.innerHTML = document.getElementById("inp").value;
  var inputValue = document.getElementById("inp").value;
  var iv = document.createTextNode(inputValue);
  if (inputValue === '') {
    alert("Введите Дело !");
  } else {
    document.getElementById("quest").appendChild(newLi);
  }
  document.getElementById("inp").value = "";
  document.getElementById('del').style.display = 'block';
  newLi.className = 'draggable';

  //Создание крестика для удаления одного дела 
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.addEventListener('click', closes)
  span.appendChild(txt);
  newLi.appendChild(span);
  return;
}

//обработчик клик удаления одного дела
closes = function() {
  this.parentNode.remove();
}

//Функция при нажатии ""Удалить Все""
function del() {
  document.getElementById("quest").innerHTML = "";
  document.getElementById('del').style.display = 'none';
  return;
}

//События при нажатии на кнопки
document.getElementById('btn').addEventListener('click', write);
document.getElementById('del').addEventListener('click', del);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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