удалить определенный элемент списка из неупорядоченного списка при нажатии кнопки удаления - PullRequest
Новая
       23

удалить определенный элемент списка из неупорядоченного списка при нажатии кнопки удаления

0 голосов
/ 25 мая 2018

Я новичок в изучении Javascript.Я хотел удалить определенный элемент списка в моем неупорядоченном списке.У каждого элемента есть кнопка удаления, я просто не могу понять, как мои кнопки узнают, что это их элемент, который я выбрал, не используя их индекс. 

let enterListBtn = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");
let togList = document.getElementsByTagName("li");
let deleteBtn = document.getElementById("delete");

function deleteItem() {
    togList.parentNode.removeChild(togList);
}

deleteBtn.addEventListener("click", deleteItem);

HTML 

<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
    <li>Notebook <button id="delete">Delete</button></li>
    <li>Jello <button>Delete</button></li>
    <li>Spinach <button>Delete</button></li>
    <li>Rice <button>Delete</button></li>
    <li>Birthday Cake <button>Delete</button></li>
    <li>Candles <button>Delete</button></li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Вы можете нацелить элемент, используя объект события, затем использовать parentNode, чтобы удалить элемент 

// adda common class to all the buttons
let deleteBtn = document.getElementsByClassName("btn");
// converting html collection to array, to use array methods
Array.prototype.slice.call(deleteBtn).forEach(function(item) {
  // iterate and add the event handler to it
  item.addEventListener("click", function(e) {
    e.target.parentNode.remove()
  });

})
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
  <li>Notebook <button class="btn" id="delete">Delete</button></li>
  <li>Jello <button class="btn">Delete</button></li>
  <li>Spinach <button class="btn">Delete</button></li>
  <li>Rice <button class="btn">Delete</button></li>
  <li>Birthday Cake <button class="btn">Delete</button></li>
  <li>Candles <button class="btn">Delete</button></li>
</ul>
0 голосов
/ 25 мая 2018

просто добавьте класс для каждой кнопки удаления, в методе jquery add click click, затем установите родительский элемент для удаления кнопки .. проверьте этот код .. 

 $('.delete').on('click', function(){
      $(this).parent().remove();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
    <li>Notebook <button class="delete">Delete</button></li>
    <li>Jello <button class="delete">Delete</button></li>
    <li>Spinach <button class="delete">Delete</button></li>
    <li>Rice <button class="delete">Delete</button></li>
    <li>Birthday Cake <button class="delete">Delete</button></li>
    <li>Candles <button class="delete">Delete</button></li>
</ul>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...