DEV Community

Cover image for Facing problem in JS
Vandit Verma
Vandit Verma

Posted on

Facing problem in JS

๐Ÿ˜‡Can anyone help me to understand the the line of code i mentioned with emoji down below

`const form=document.querySelector(".form");
const input=document.querySelector(".form_input");
const list = document.querySelector(".toDoList");
const submit=document.querySelector(".submit_btn");

form.addEventListener("submit",(data)=>{
data.preventDefault();
let data_id=String(Date.now());//Try to remove the "String"
let value=input.value;

create_the_list(value,data_id);
input.value="";
})

list.addEventListener("click",(x)=>{
let unique_id=x.target.getAttribute("data-id");
if(unique_id)
{
remove_element(unique_id);
}

})

function create_the_list(value,data_id)
{
const li=document.createElement("li");
li.innerText=value;
li.setAttribute("data-id",data_id);
list.appendChild(li);
}

function remove_element(element)
{
๐Ÿ‘‰ var li = document.querySelector('[data-id="' + element + '"]')
list.removeChild(li);
}`

Top comments (1)

Collapse
 
jacobdejean profile image
jacobdejean

[data-id=โ€œabcโ€] is a selector for elements that have a matching attribute.

Concatenating the element variable instead of โ€œabcโ€ letโ€™s you dynamically query elements with any given data-id