Как заставить работать кнопку удаления элемента списка - PullRequest
Новая
       34

Как заставить работать кнопку удаления элемента списка

0 голосов
/ 14 апреля 2020

В настоящее время я работаю над программой списка контактов. Я хочу, чтобы люди могли удалять контакты из списка с помощью кнопки tra sh can. У каждой контактной информации есть своя собственная кнопка, и люди могут удалить то, что они хотят удалить. Мой код не показывает ошибки при проверке (chrome), но код не работает. 

var demo = document.getElementById("demo");
function addName() {
  var fname = document.getElementById("fname").value;
  var entry = document.createElement("li");
  var img = document.createElement("img");
  img.src = "img/talkbox.png";
  $(img).addClass("talkbox");
  var deleteBtn = document.createElement("img");
  deleteBtn.src = "img/delete.png";
  $(deleteBtn).addClass("deleteBtn");
  entry.appendChild(img);
  entry.appendChild(document.createTextNode(fname));
  entry.appendChild(deleteBtn);
  demo.appendChild(entry);
  document.getElementById('fname').value = "";
};
const trashCan = document.getElementById("trashcan");
trashCan.addEventListener('click', removeEvent);
function removeEvent(e) {
  const list = document.getElementById("demo");
  if (e.target.classList.contains('deleteBtn')) {
    list.removeChild(e.target.parentElement);
    list.removeChild(list);
  };
};
<div>
  <ul id="contactlist" class=ppl>
    <li id="pplli">
      <img id="wetalk" class="talkbox" src="img/talkbox.png">
      <p class="contactname">Aiden<img id="trashcan" class="deleteBtn" src="img/delete.png"></p>
    </li>
    <ol id="demo">
    </ol>
    <br>
    <a href="#addform" class="pplbtn" id="add"><img id="plus" src="img/plus.png"></a>
  </ul>
</div>

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Я на самом деле не уверен, как вы справляетесь с удалением. Но если вы планируете удалить элемент при нажатии на кнопку удаления в нем. Я имею в виду кнопку удаления внутри элемента. Затем вы можете просто выбрать элемент, используя document.querySelect и использовать метод remove в js. Вот ссылка

0 голосов
/ 14 апреля 2020 
const trashCan = document.getElementById("trashcan");

Если у вас есть список элементов, и вы используете этот код для него, это не сработает, потому что идентификаторы должны быть уникальными в документе. Если вы создаете несколько элементов и присваиваете им один и тот же идентификатор, при попытке получить элемент по его идентификатору браузер не будет знать, о каком вы говорите.

В отдельной заметке вам следует используйте соответствующие элементы HTML для создания вашего документа, иначе у вас возникнут проблемы с доступностью. Изображение не кнопка. Попробуйте вместо этого использовать элемент <button>.

...