Adicionar mais de um Campo Telefone

[SeRgIorIcaRdo123 0]

Ola pessoal, boa noite!

 

Sou iniciante em javascript.Queria saber se alguem sabe adicionar mais de um campo pro telefone com javascript, nas seguintes regras.

 

seria assim: no clique do botao "+" ele adionaria "telefone1", no segundo clique adicionaria "telefone2"...

 

assim:

 

Telefone1

telefone2

telefone3

telefone4

telefone5

...

 

Caso eu delete o telefone3, os de baixo subiriam e mudaria a numeração destes(teria um botao pra deletar a cada campo adicionado)

assim ficaria:

 

Telefone1

telefone2

telefone3

telefone4

...

 

ou seja, o telefone4 ficaria telefone3 e o telefone5 ficaria telefone4.

 

 

 

 

[L. Henrique 179]

Não entendi seu nome hahsuhaushuahsuahusa mas bora lá!

O que você precisa é de um .before() ou .append() pra adicionar um novo elemento na página e também de um .remove() para remoção desse mesmo elemento.

Vamos começar montando o HTML:

<div id="telefones">
  <div class="wrapper">
    <input type="text" placeholder="Telefone">
  </div>
  <div class="wrapper">
    <button class="adicionar">Adicionar telefone</button>
  </div>
</div>

E agora vamos montar o jQuery:

var telPlaceholder = 0,
    telClass = 0;

$('.adicionar').on('click', function() {
	$('.wrapper:last').before('<div class="wrapper"><input type="text" placeholder="Telefone '+ telPlaceholder++ +'" class="telefone'+ telClass++ +'"/> <button class="remover">Remover</button></div>');
});
$('#telefones').on('click','.remover', function() {
	$(this).parent().remove();
});

O jQuery diz o seguinte: Após o último elemento .wrapper, ele vai adicionar tudo aquilo que está dentro de parêntesis, no caso, um novo elemento .wrapper (pra deixar continua a adição) e um novo input. Perceba que temos duas variáveis, uma pra classe e outra pro placeholder (identificação). Essas duas variáveis recebem o valor 0 e a cada vez que forem adicionadas, elas somam +1 (variavel++). Os elementos então tendem a sair como: telefone 0, telefone 1, telefone 2, telefone 3 e por ai vai. Se você quiser que comece em 1, altere as variáveis para 1.

Eu criei duas variáveis, pois se eu adicionar somente uma e somar ela duas vezes num mesmo append, vai pular: telefone 0, telefone 2... Porque ela estará recebendo duas somas, duplicando seu valor atual.

E no final, bem, está bem claro: Ele pega o elemento pai (.wrapper) e remove.

Se quiser, preparei uma DEMO pra você ver como ficou.

Abraços!

[SeRgIorIcaRdo123 0]

Não entendi seu nome hahsuhaushuahsuahusa mas bora lá!

 

O que você precisa é de um .before() ou .append() pra adicionar um novo elemento na página e também de um .remove() para remoção desse mesmo elemento.

 

Vamos começar montando o HTML:

<div id="telefones">
  <div class="wrapper">
    <input type="text" placeholder="Telefone">
  </div>
  <div class="wrapper">
    <button class="adicionar">Adicionar telefone</button>
  </div>
</div>

E agora vamos montar o jQuery:

var telPlaceholder = 0,
    telClass = 0;

$('.adicionar').on('click', function() {
	$('.wrapper:last').before('<div class="wrapper"><input type="text" placeholder="Telefone '+ telPlaceholder++ +'" class="telefone'+ telClass++ +'"/> <button class="remover">Remover</button></div>');
});
$('#telefones').on('click','.remover', function() {
	$(this).parent().remove();
});

O jQuery diz o seguinte: Após o último elemento .wrapper, ele vai adicionar tudo aquilo que está dentro de parêntesis, no caso, um novo elemento .wrapper (pra deixar continua a adição) e um novo input. Perceba que temos duas variáveis, uma pra classe e outra pro placeholder (identificação). Essas duas variáveis recebem o valor 0 e a cada vez que forem adicionadas, elas somam +1 (variavel++). Os elementos então tendem a sair como: telefone 0, telefone 1, telefone 2, telefone 3 e por ai vai. Se você quiser que comece em 1, altere as variáveis para 1.

 

Eu criei duas variáveis, pois se eu adicionar somente uma e somar ela duas vezes num mesmo append, vai pular: telefone 0, telefone 2... Porque ela estará recebendo duas somas, duplicando seu valor atual.

 

E no final, bem, está bem claro: Ele pega o elemento pai (.wrapper) e remove.

 

Se quiser, preparei uma DEMO pra você ver como ficou.

 

Abraços!

kkkk meu nome é sergio!!...

man, da hora! faltava so quando removesse a numeração do telefone, vim sequencial