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 = ''
}