Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

alternativa usando cloneNode()

olá, eu fiz um objeto copia do modelo, e apenas modifiquei as informações específicas:

const item = document.getElementById("input-item");
const modelo  = document.getElementById("modelo");
let contador = 2;

botaoSalvarItem.addEventListener("click", adicionarItem);

function adicionarItem(evento) {
    evento.preventDefault();

    const novoItem = modelo.cloneNode(true);
    novoItem.removeAttribute("id");

    novoItem.querySelector("p").textContent = item.value;
    novoItem.querySelector("label").setAttribute("for", "checkbox-" + contador);
    novoItem.querySelector("#checkbox-1").id = "checkbox-" + contador++;
    
    
    novoItem.querySelector("label").addEventListener("click", function (evento) {
        const checkboxInput = evento.currentTarget.querySelector(".checkbox-input");
        const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado");
        
        checkboxInput.checked ? checkboxCustomizado.classList.add("checked") : checkboxCustomizado.classList.remove("checked");
    })
}
1 resposta
solução!

Olá, Nasser, como vai?

Muito bacana a solução que você encontrou para duplicar o modelo e ajustar as informações de forma dinâmica! A utilização do cloneNode() é uma ótima escolha para lidar com situações em que é necessário replicar elementos mantendo a estrutura base, mas ajustando os dados.

Continue explorando e aplicando conceitos assim.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)