Rimuovere un elemento specifico da array

[fermat]

ciao!
ho questa funzione che in pratica aggiunge / rimuove elementi a seconda che le checkbox siano "ceccate" o meno:

var arrSti = new Array();
function filtroAjax(sti) {
    if($('.chk_sti').is(':checked')) {
        arrSti.push(sti);
    } else {
        arrSti.splice(arrSti.indexOf(sti), 1);
    }
    console.log(arrSti.toString())
}

nessun problema nel push.
invece ho un problema con la rimozione.
io dovrei rimuovere dalla lista l'elemento che è stato deselezionato.
così non mi funziona bene.
questo il risultato:

[10:28:12.385] 5
[10:28:14.763] 5,7
[10:28:16.512] 5,7,8
[10:28:17.775] 5,7,8,7
[10:28:20.051] 5,7,8,7,5

è come se non li levasse.
come posso fare??

[fermat]

ho notato una cosa:

var arrSti = new Array();
function filtroAjax(sti) {
    if($('.chk_sti').is(':checked')) {
        arrSti.push(sti);
    } else {
        arrSti.splice(arrSti.indexOf(sti), 1);
        console.log(arrSti.indexOf(sti)); // SEMPRE -1
    }
    console.log(arrSti.toString())
}

ho aggiunto la riga con il commento.
in pratica mi restituisce sempre -1, il che vorrebbe dire che non trova l'elemento nella lista se non sbaglio.
secondo voi perchè??

[fermat]

ho pensato che il problema possa essere nel fatto che io ho diverse checkbox generate dinamicamente:

<input class="chk_sti" type="checkbox" onclick="filtroAjax(1);" value="1" name="stili">
<input class="chk_sti" type="checkbox" onclick="filtroAjax(2);" value="2" name="stili">
<input class="chk_sti" type="checkbox" onclick="filtroAjax(3);" value="3" name="stili">
<input class="chk_sti" type="checkbox" onclick="filtroAjax(4);" value="4" name="stili">
<input class="chk_sti" type="checkbox" onclick="filtroAjax(5);" value="5" name="stili">
.....................

come posso fare in questo caso specifico??