Capture index of dynamically created elements

Question

Capture index of dynamically created elements

Navigation

#1 by (2 votes)

3

I intend to create a seemingly simple function. My code is this:

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><divclass="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>

What I want is for the buttons to work in their respective roles: remove the div#coordenates they are present in and add a new div#coordenates after they are gifts. However, as you can pecerber in my example, I did not succeed.

The reason for my failure is that elements are dynamically created, even though they have been able to assign events to them by of this question , I still can not correctly capture index of these elements using their classes when they are clicked. The index is required to know what div are, and thus deleting it or adding a next one.

If there is another way to accomplish my goal (remove / add), I am also open to new possibilities. Thanks for any help.

javascript html jquery javascript-eventos

asked by anonymous 17.12.2015 / 02:06

1 answer

How to be notified when there are changes in the grid - AngulasJs ui-grid How to connect a struct in the other?

score 2 · Accepted Answer

I think what you are looking for is:

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: link

Note that when you want to call a function like I did, $(algo).on('evento', callback); there this is passed to the function. But when you use a function like this:

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

then this is not passed. To pass you have to call the function with callback.apply(this);

Regarding your logic of indexOf is eq it does not work well when the elements are dynamic. The algo.get().indexOf(this); logic fails because this variable algo ( add and remove in your code) only has the elements that were on the page when it opened, not the new ones.

Using .closest you can always know what .coordenates has been clicked and act from there.