Remove list item

Asked

Viewed 32 times

0

How do I remove the item from the list that is generated after the event that creates it? I am trying to place an event that has the function of removing the item, but when I run the code it turns me an error and the remove button does not work.

'use strict';
    
    //input do header
    const input = document.querySelector("input")
    
    //Botão do Header
    const headerBtn = document.querySelector("#btnHeader")
    
    //ul
    const list = document.querySelector("#list")
    
    //Class do botão de remover item
    const listBtn = document.querySelector(".btnList")
    
    //Função que cria um item no HTML
const model = (item) => {

    const itemList = document.createElement("li")

    itemList.innerHTML = `
        ${item}
        <button class="btnList">Remover</button>
    `

    list.appendChild(itemList)
}

  //Evento que cria o item ao clicar no botão
headerBtn.addEventListener("click", function (event) {

    if(input.value === "" || input.value === " ") {
        alert("Preencha o campo com um item")

    } else {
        model(input.value)
        input.value = ""
    }
    
    event.preventDefault()
})

  //Evento que remove o item ao clicar no botão
<!DOCTYPE html>
<html lang="pt-br">

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

    <link rel="stylesheet" href="style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">

    <title>To do list</title>
</head>
<body>
    <header>
        <h1>
            To do List
        </h1>
    </header>

    <main>

    <section id="add">
        <form>
            <input type="text" placeholder="O que deseja listar?" autocomplete="off">

            <button id="btnHeader">Adicionar</button>
        </form>
    </section>

    <section>

        <ul id="list">
        </ul>
        
    </section>

    </main>

    <script src="script.js"></script>
</body>
</html>

javascript html javascript-events ecmascript-6

  • Put on button one onclick="this.parentNode.outerHTML = ''". This will remove the <li> where is the button.

  • On the remove button? But I also have the problem in the removal event, because the li is generated after finalizing the create event, where I can call this event?

1 answer

0

In his function model(item) you can create an element button to the "Remove" button, implement the event onclick and then add it into the element li. For example:

const model = (item) => {
    const itemList = document.createElement('li')

    itemList.innerHTML = item

    const btnRemover = document.createElement('button')
    btnRemover.innerText = 'Remover'
    btnRemover.onclick = function () {
      this.parentNode.remove()
    }

    itemList.appendChild(btnRemover)

    list.appendChild(itemList)
}

Functional example (adding the snippet in your code):

'use strict';
    
    //input do header
    const input = document.querySelector("input")
    
    //Botão do Header
    const headerBtn = document.querySelector("#btnHeader")
    
    //ul
    const list = document.querySelector("#list")
    
    //Class do botão de remover item
    const listBtn = document.querySelector(".btnList")
    
    //Função que cria um item no HTML
const model = (item) => {

    const itemList = document.createElement("li")

    itemList.innerHTML = item

    const btnRemover = document.createElement('button')
    btnRemover.innerText = 'Remover'
    btnRemover.onclick = function () {
        this.parentNode.remove()
    }

    itemList.appendChild(btnRemover)

    list.appendChild(itemList)
}

  //Evento que cria o item ao clicar no botão
headerBtn.addEventListener("click", function (event) {

    if(input.value === "" || input.value === " ") {
        alert("Preencha o campo com um item")

    } else {
        model(input.value)
        input.value = ""
    }
    
    event.preventDefault()
})

  //Evento que remove o item ao clicar no botão
<!DOCTYPE html>
<html lang="pt-br">

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

    <link rel="stylesheet" href="style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">

    <title>To do list</title>
</head>
<body>
    <header>
        <h1>
            To do List
        </h1>
    </header>

    <main>

    <section id="add">
        <form>
            <input type="text" placeholder="O que deseja listar?" autocomplete="off">

            <button id="btnHeader">Adicionar</button>
        </form>
    </section>

    <section>

        <ul id="list">
        </ul>
        
    </section>

    </main>

    <script src="script.js"></script>
</body>
</html>

Browser other questions tagged javascript html javascript-events ecmascript-6

You are not signed in. Login or sign up in order to post.