escopo de variáveis ??no atributo onclick com Javascript

Question

Eu estou usando Prototype e tentando acessar dinamicamente uma variável em um loop.

Código fala melhor do que eu:

for (var i=0;i<5;i++) {
    $('parent' + i).insert('<input type="button" value="Cancel" onclick="$('parent' + i).remove()" />', {position: 'after'});
}

O problema é que "i não está definido" quando eu clicar em qualquer um dos botões Cancelar.

Como faço para alterar o escopo de variáveis ??para que "i" mantém o valor adequado para cada botão? Eu não estou interessado em qualquer arroud trabalho.

Answer 1

Eu acho que você estava colocando i na cadeia entre aspas, em vez de parent assim foi no nível errado de escopo (conceitualmente falando).

for (var i=0;i<5;i++)
{
    $('parent' + i).insert(
      '<input type="button" value="Cancel" onclick="$(\'parent' + i +
         '\').remove()" />', {position: 'after'});
}

Answer 2

Você pode fazê-lo assim -

for (var i = 0; i < 5; i++) {

    $('parent' + i).insert('<input type="button" value="Cancel" onclick="$(\'parent' + i + '\').remove()" />', {position: 'after'});
}

Ele será processado como este -

<input type="button" value="Cancel" onclick="$('parent1').remove()" />
<input type="button" value="Cancel" onclick="$('parent2').remove()" />
<input type="button" value="Cancel" onclick="$('parent3').remove()" />
...

e assim por diante.

Answer 3

não é necessário que a variável i. se você deseja remover pai dessa entrada, fazer:

<input type="button" value="Cancel" onclick="this.parentNode.parentNode.removeChild(this.parentNode)" />

ou se você realmente quer, você pode:

for (var i=0;i<5;i++) {
    $('parent' + i).insert('<input type="button" value="Cancel" onclick="$(\'parent' + i + '\').remove()" />', {position: 'after'});
}