delete specific list item from unordered list when delete button is clicked

Question

I'm new in learning Javascript. I wanted to delete specific list item in my unordered list. Every item has a delete button, I just can't figure out how my buttons will know if it's their item that I chose without using their index.

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>

Please add your HTML also.

Ankit Agarwal
– Ankit Agarwal

2018-05-25 08:23:01 +00:00
Commented May 25, 2018 at 8:23 — Ankit Agarwal
– Ankit Agarwal, Commented May 25, 2018 at 8:23

Sree · Accepted Answer · 2018-05-25 08:31:31Z

5

simply add a class for every delete button, in the jquery add click event method, then get parent of button remove it.. check this code..

 $('.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>

answered May 25, 2018 at 8:31

Sree

3742 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

izee Over a year ago

Thank you so much for your answer. Can you tell me what does the $ mean?I've encountered it before when learning JS from a different site, but I can't remember what it means. I know it's a shortcut...I just can't remember of what.

Sree Over a year ago

@izee I think you have accepted the wrong answer.. that won't work for all delete buttons

izee Over a year ago

yeah. I tried it and it prompted an error. Thanks for your answer. However, I can't run it, the browser won't accept $...I'm not yet on the JQuery, but is there something I can do to make my browser accept it? The console is saying that $ is not defined.

Sree Over a year ago

brk Over a year ago

@izee Why you want to do it with jquery? Many application does not use jquery at all. It can be done using native js . Using jquery is an overload

|

brk · Accepted Answer · 2018-05-25 09:03:16Z

You can target the element using the event object then use parentNode to delete the element

// 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>

Collectives™ on Stack Overflow

delete specific list item from unordered list when delete button is clicked

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related