Ola, peço a vossa ajuda, tenho este exercicio: Mascara Desinfectante Sabao </ol 1.Criar um formulario com input de texto e um butao com (Inserir) Usando apenas Javascript ao clicar uma vez no botao deve in…

Inserir e excluir elemento na lista com javascript

27 de março de 2020 2 respostas

hortencioit 27 de março de 2020

Ola, peço a vossa ajuda, tenho este exercicio:

Mascara
Desinfectante
Sabao

Ja criei a lista e o formulario com o botao inserir.

<li>Máscara</li>
	<li>Desinfectante</li>
	<li>Sabão</li>

</ul>
<form>
	<input type="texto">
	<input type="submit" onclick="inserir()" name="list" value="Inserir"/>

</form>

Agora a parte do javascript para adicionar e remover

2 Respostas

Lucas_Camara 27 de mar. de 2020

Antes, dê uma olhada nisso: https://www.w3schools.com/jsref/jsref_obj_array.asp

Francisco_Chaves 31 de mar. de 2020

Olá amigo, veja se o código abaixo te ajuda, para ver o programa em execução clique aqui.

<div class="container">
  <div class="list">
    <ul>
      <li>Máscara</li>
      <li>Desinfectante</li>
      <li>Sabão</li>
    </ul>
  </div>

  <form>
    <input type="text" placeholder="Produto">
    <input class="button" type="submit" value="Inserir" />
  </form>
</div>

function adicionarEventoRemoverItem() {
  const itens = document.querySelectorAll("li");
  for (let i = 0; i < itens.length; i++) {
    itens[i].ondblclick = function () {
      this.remove();
    };
  }
}

function inserirItem() {
  const produto = document.querySelector("input[type=text]");
  const lista = document.querySelector("ul");
  if (!!produto.value) {
    lista.insertAdjacentHTML("beforeend", `<li>${produto.value}</li>`);
    produto.value = "";
    return true;
  }
  return false;
}

const formulario = document.querySelector("form");
formulario.onsubmit = function (event) {
  event.preventDefault();
  if (inserirItem()) {
    adicionarEventoRemoverItem();
  }
};

Criado 27 de março de 2020

Ultima resposta 31 de mar. de 2020

Respostas 2

Participantes 3

2 Respostas

Topicos relacionados