Jump to content

Recommended Posts

Olá,

quero criar uma lista de itens montada com js:

Onde teremos um campo, e através de click cada valor do input será adicionado num lista.

Quero também que seja possível apagar cada item da lista.

 

Fiz dois scripts mas, não estão completos.

Alguém pode me ajudar?


Exemplo1:

Nesse exemplo o único problema é que cada item deveria fica um abaixo do outro.


 

<style>
.lista{
border:1px solid red;
 }
</style>

<input type="text" id="item">
<button onclick="myFunction()">ADD</button>

<p id="demo"></p>
      
<script>
	var lista = [];
    document.getElementById("demo").innerHTML = lista;
            
   function myFunction() {
     	var item = document.getElementById("item").value;
   		lista.push(item);
   		document.getElementById("demo").innerHTML = "<input type='text' id='i' onclick='myFunctionR()' class='lista' value='" +  lista  + "'></div>";              }
            
   function myFunctionR() {
   		lista.pop();
    	document.getElementById("demo").innerHTML = "<div onclick='myFunctionR()' class='lista'>" + lista + "</div>";
    }
</script>

 

Exemplo 2:

Nesse exemplo, consegui ter cada item da lista em uma div separadamente, mas não consegui remover um item por vez.

 

 

<style>
.lista{
	border:1px solid red;
}
</style>

<script>
	var i = 1;
    function escreve(){
		var txt_pre_definido = document.getElementById('x').value;
        var t= document.getElementById("texto").innerHTML += "<div class='lista' id='" +i+ "' onclick='apaga(" +i+ ")'>" + txt_pre_definido+"</div>";
        i++;
     }
                   
  function apaga(v){
    //t.pop(v);
    document.getElementById(t).innerHTML="";
    }
</script>
        
<input type="text" id="x"  />
<input type="button" value="OK" onclick="escreve()"  />
        
<div id="texto" onclick="apaga();"></div>

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By joaquim_bezzera
      Estou fazendo um trabalho para a faculdade criando uma estrutura de cadastro de uma corrida. Já consegui fazer grande parte mas não consigo resolver esses pontos. Alguém saberia resolver?

    • By juliaKrunker
      1- O comando typedef pode ser utilizado para criar novos comandos, ou simplesmente novas formas de escrever
      determinados comandos em linguagem C. Por exemplo, toda vez que você quiser criar uma variável do tipo struct
      declarado acima, terá que escrever o nome completo do tipo, isto é struct lista. Usando o comando typedef, defina um
      tipo alternativo, chamado Lista, que possa ser usado em lugar de struct lista.

      2-  Usando o tipo Lista que você criou na questão 3, declare uma variável chamada myList que possa ser utilizada para
      construir uma lista encadeada.
       
      3- (0,5) Usando o tipo Lista que você criou na questão 3, declare uma variável chamada novo que possa ser utilizada para criar
      um novo elemento para a lista declarada na questão 4.

      4- Escreva uma linha de código que aloque espaço na memória para a variável novo declarada na questão 5, de forma
      que a variável possa ser utilizada para inserir um novo elemento na lista myList declarada na questão 4.

      5 -Considerando a variável myList declarada na questão 4 e a variável novo declarada na questão 5 e alocada na questão
      6, atribua os valores 1 para o atributo id e 9.1 para o atributo valor e insira-a na lista myList.
       
      6- O trecho de código apresentado a seguir, refere-se a uma função que receberá como parâmetro um ponteiro para
      uma lista do tipo Lista e deverá calcular e retornar a média dos valores existentes na lista. Escreva o corpo da função.

    • By VCastilho
      Boa Tarde
      Estou tentando desenvolver um Filtro Inteligente, no qual funcionaria da seguinte forma:

      Filtro 1         Filtro 2          Filtro 3          Filtro 4 
      Opção 1
      Opção 2
      Opção 3


      Ao selecionar a Opção 1 do Filtro 1 liberaria as opções do filtro 2

      Filtro 1         Filtro 2              Filtro 3          Filtro 4 
      Opção 1      Opção 1 - a     
                           Opção 1 -b
                           Opção 1 -c

      Assim escolhendo a opção do filtro 2 liberaria as opções do Filtro 3 e assim por diante
      Ao escolher a Opção 2 do Filtro 1 liberaria outras opções

      No caso preciso aplicar na plataforma da Tray, que é o de menos porém não consigo chegar ao código certo
      Estou tentando utilizar o HTML e o JQuery em conjunto para isso, conseguem me ajudar? Realmente estou perdido na situação

      Atenciosamente Vinicius Castilho
    • By cauai
      Olá,
      Eu estou tentando criar uma lista de vendedores que irão receber o contato de clientes através do meu site. É uma plataforma wordpress, porém tenho completo acesso ao código php.
      Até agora, só achei maneiras de enviar para múltiplos e-mails, como cópia, ou separando por departamento à escolha do cliente, utilizando o Contact Form 7, o que não é meu desejo.
      Quero algo como isso:
       
      Não sei se o Contact Form 7 me permitiria algo desse tipo, ou se teria mesmo que fazer pelo php. Mas aceito ajuda para ambos os casos.
    • By Marcosvn
      Eu preciso criar uma funcao que pegue todas as tags <h2> dentro da sessao <article> 
       
      Basicamente oq eu quero fazer eh gerar um índice de links ancoras dinamicamente para deixar logo no inicio da pagina e, assim o usuario acessar diretamente o topico de interesse.
       
      Porem eu nao faço ideia por onde comecar essa função. Alguem pode me dar a direcao ??
       
      imagino que devo pegar cada tag H2 e armazenar numa variavel. Porem nao sei como faço isso
       
      Outro problema eh q vou precisar inserir a atributo id="#<h2>"  tbm dinamicamente
       
      nao sei se estou pensando certo ou se existe outras alternativas pra chegar nesse resultado. Mas qualquer esclarecimento ja ajuda
       
      vlw
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.