I am trying to make a todo app in which I made a functionality of delete when ever I delete a element , the element is deleted successfully but as soon as I type in input box I get this error.
Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
import { React, useState } from 'react'
import "./todo.css"
function Todo() {
const [value, setValue] = useState("") //input value
const [items, setitems] = useState([]) //items to be added
function handleClick() {
// Adding items in a item array
setitems(items.concat(value))
setValue("")
}
function handleChange(e) {
// Fetching input value
setValue(e.target.value)
}
return (
<>
<div className='container'>
<h1 id='mainhead'>Todo App</h1>
</div>
<div className='container1'>
<input onChange={handleChange} value={value} placeholder='Enter a task' type="text" />
<button onClick={handleClick}>Add Item</button>
</div>
{/* mapping all the items */}
{items.length !== 0 ? items.map((e) => {
return <div className='item' key={e}><label>Task {items.indexOf(e) + 1}:</label> {e}
<button style={{float:"right" , backgroundColor:"red" , color:"white" , width:"80px" , height:"30px"}} onClick={()=>{
const child = document.getElementById("delete" + items.indexOf(e)) // accessing child
console.log(child)
child.parentElement.remove() //Deleting parent element
items.splice(items.indexOf(e),1) //removing element from items
setitems(items) // updating items
}} id = {"delete" + items.indexOf(e)}>Delete</button> </div>
})
: null}
</>
)
}
export default Todo
I tried everything but nothing works help me to handle this error
