How would I target individual list items in this example?

So I’m basically trying to get a mini “to do list” project to work.

everything is working fine accept the very last step!

so, I basically have it set up to where when I type text into the input field and hit submit it’ll log out the value of the input field below in an UL

Now I have the value of the input field wrapped in LI tags using .innterHTML as you can see in the code. each LI tag will have a button on the right of the text that will basically be a delete button.

Now when I log things out into the UL below, every entry has a delete button next to it. However, when I use this delete button it deletes every entry. and not the single entry I’m trying to click if that makes sense.

I know that the buttons are clearing the entire UL when clicked and that’s why it’s all being cleared.

how would you target these list items separately? This project went pretty smooth up until this!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="div1"> 
    <h1>To-Do List</h1>
        <input type="text" id="input-text" placeholder="log an item here!">

        <button id="submit-button">Submit</button>
        <button id="clear-button">Clear List</button>

    </div> 

    <div>
        <ul id="text-under">
            
        </ul>
    </div>
    <script src="index.js"></script>
</body>
</html>
let inputText = document.getElementById('input-text')
let submitButton = document.getElementById('submit-button')
let clearButton = document.getElementById('clear-button')
let textUnder = document.getElementById('text-under')


submitButton.addEventListener('click', function() {
    textUnder.innerHTML += `<li> ${inputText.value} <button onclick='example()'>x</button> </li>`
    inputText.value = ''
})

clearButton.addEventListener('click', function() {
    textUnder.textContent = ''
})

function example() {
    textUnder.textContent = ''
} 

One option is to add a class named delete-button to each button within each li element. You can remove the onclick attribute as it will not be needed.

Next, add a click event listener to the ul element. Its callback would make use of the event object passed to it and then you can check two things:

  1. if event.target exists.
  2. if the event.target has a class name delete-button, then you will remove event.target’s parent element (the corresponding li element).

I have given you a good start. If you get stuck, try using Google for the things I have specified above to see if you can research how to use the concepts to complete the task you.

as much as I appreciate this answer, I’m lost hahaha.

I don’t think I know enough of the javascript basics to actually complete this. I’m really pushing myself and I think I’m going too fast.

I’m just trying to force myself to build things to get actual practice in.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.