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.