3

Eu pretendo criar uma função aparentemente bem simples. Meu código é este:

var coordenates = $(".coordenates");
var add = $('.add');
var remove = $('.remove');

var newCoordenate = '<div class="coordenates"><input type="text" />, <input type="text" /> <input type="button" class="addRemove remove" value="-" /><input type="button" class="addRemove add" value="+" /></div>';

function addCoordenate() {
  var i = add.get().indexOf(this);
  coordenates.eq(i).after(newCoordenate)
}

function removeCoordenate() {
  var i = remove.get().indexOf(this);
  coordenates.eq(i).remove();
}
$('.coordenateBox').on('click', '.coordenates .add', function() {
  addCoordenate();
});
$('.coordenateBox').on('click', '.coordenates .remove', function() {
  removeCoordenate();
});
.coordenates {
  height: 30px;
  box-sizing: border-box;
  margin: 5px 0;
}

.addRemove {
  width: 30px;
  height: 30px;
  background: #00ae84;
  color: #fff;
  font-size: 120%;
  border: none;
  text-align: center;
  line-height: 25px;
  opacity: 0.6;
  cursor: pointer;
}

.addRemove:hover {
  opacity: 0.9;
}

.addRemove:nth-child(odd) {
  background: #f00;
}

.coordenates input[type="text"] {
  height: 30px;
}

.coordenates input {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="coordenateBox">
  <div class="coordenates">
    <input type="text" />, <input type="text" /> 
    <input type="button" class="addRemove remove" value="-" onclick="removeCoordenate()"/><input type="button" class="addRemove add" value="+" onclick="addCoordenate()" />
  </div>
</div>

O que quero é que os butões funcionem em suas respectivas funções: remover a div#coordenates em que estão presentes e adicionar um nova div#coordenates após a que estão presentes. Entretanto, como vocês podem pecerber no meu exemplo, não tive sucesso.

A razão do meu insucesso é fato de que os elementos são criados dinamicamente, apesar de ter conseguido uma maneira de atribuir eventos a eles por meio dessa pergunta, ainda não consigo capturar corretamente o index desses elementos utilizando suas classes, quando são clicados. O index é necessário para saber em qual div estão, e assim, deletá-la ou adicionar uma seguinte.

Se existir outra maneira de realizar o meu objetivo (remove/add), também estou aberto a novas possibilidades. Agradeço qualquer ajudar.

1 Resposta 1

2

Acho que o que procuras é:

var newCoordenate = '<div class="coordenates"><input type="text" />, <input type="text" /> <input type="button" class="addRemove remove" value="-" /><input type="button" class="addRemove add" value="+" /></div>';

function addCoordenate() {
  $(this).closest('.coordenates').after(newCoordenate)
}

function removeCoordenate() {
  $(this).closest('.coordenates').remove();
}
$('.coordenateBox').on('click', '.coordenates .add', addCoordenate);
$('.coordenateBox').on('click', '.coordenates .remove', removeCoordenate);

jsFiddle: https://jsfiddle.net/Sergio_fiddle/whu5f1aq/

Nota que quando queres chamas uma função como eu fiz, $(algo).on('evento', callback); aí o this é passado à função. Mas quando usas uma função assim:

$(algo).on('evento', function(){
    callback();
});

aí o this não é passado. Para passar tens de chamar a função com callback.apply(this);

Em relação à tua lógica de indexOf é eq ela não funciona bem quando os elementos são dinamicos. A lógica algo.get().indexOf(this); falha pois essa variável algo (add e remove no teu código) só tem os elementos que havia na página quando ela abriu, e não os novos.

Usando .closest podes sempre saber qual é o .coordenates que foi clicado e agir a partir daí.

2
  • 1
    Era exatamente isso que procurava. Obrigado. Commented 17/12/2015 às 22:52
  • @SamirBraga de nada, fico contente de ter ajudado.
    – Sergio
    Commented 17/12/2015 às 22:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .