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 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
    • By tiagozone
      Oi Gente Agradeço primeiramente, Acho que seja através do php, Gostaria de criar uma pagina  simples que pudesse ter a aréa do login e se você não fosse cadastrado se cadastrar. Porém nesse cadastro teria como se fosse um itoken uma senha normal letras e números, forçando só alguns a se cadastrar. Depois do cadastro, você logado teria acesso a uma pagina porém essa pagina teria tipo que bloquear o link de acesso. A pagina seria arquivos do google. Deu pra entender? Dá pra fazer isso ou é complicado ? Ou seja so entraria nesse link a pessoa logada etc... Sei que deve entrar banco de dados tbm.. É possivel ?
       
      Agradeço
    • By lerdofphp
      Pessoal, 
       
      Tenho uma pasta com arquivos de texto com datas e gostaria de criar uma lista automática com eles apenas usando HTML e JavaScript isso seria possível?
       
      A ideia é que o script realize a pesquise dos arquivos existente na pasta e cria-se o SELECT em HTML.
       
      Exemplo:
      Pasta: paginas
      Arquivos:
      - Arquivo-12-07.txt
      - Arquivo-13-07.txt
      - Arquivo-14-07.txt
       
      Resultado Esperado:
       
      <select>
        <option value="Arquivo-12-07.txt">Arquivo-12-07.txt</option>
        <option value="Arquivo-13-07.txt">Arquivo-13-07.txt</option>
        <option value="Arquivo-14-07.txt">Arquivo-14-07.txt</option>
      </select>
       
       
       
×

Important Information

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