Removing item in nested array using splice in javascript

Question

I am having problems deleting items from my array using splice. First of all I have an Array called player which contains three other Arrays called tier1, tier2 and tier3. All three of these Arrays have values stored within them which I am looking to manipulate. I have a input and a button on my page which when clicked activates the JS function relevant to splicing the Array. I have set up an IF statement with FOR loops in order to look through tier1 to check if the input text matches a value within the array, if the text can't be found in tier1 it is supposed to then do the same for tier2 and then tier3 and finally displaying an error message if the input text is not within any of the arrays. The function works fine if the input text is in tier1 but for some reason it doesn't seem to run through the else if statement, I have provided my code below I am unsure if this is just a syntax error or if I am missing some sort of functionality. Many thanks in advance

var player=[]
var tier1=["p1","p2","p3"]
var tier2=["p4","p5","p6","p7"]
var tier3=["p8","p9","p10","p11"]

function removeFunction() {
    if (document.getElementById("removePlayer").value !== "") {
        for (index = 0; index < tier1.length; index++) {
            if(document.getElementById("removePlayer").value == tier1[index]) {
        tier1.splice(index, 1);
            playerFunction();
            playerAlert = "Player Removed";
            document.getElementById("test1").innerHTML = playerAlert;
            document.getElementById("test2").innerHTML = tier1;
    }}
    } else if (tier1[index] !== document.getElementById("removePlayer").value) {
        for (index = 0; index < tier2.length; index++) {
        if(tier2[index] == document.getElementById("removePlayer").value) {
            tier2.splice(index, 1);
            playerFunction();
            playerAlert = "Player Removed";
            document.getElementById("test1").innerHTML = playerAlert;
            document.getElementById("test2").innerHTML = tier2;
        }}
    } else if (tier2[index] !== document.getElementById("removePlayer").value) {
        for (index = 0; index < tier3.length; index++) {
        if(tier3[index] == document.getElementById("removePlayer").value) {
            tier3.splice(index, 1);
            playerFunction();
            playerAlert = "Player Removed";
            document.getElementById("test1").innerHTML = playerAlert;
            document.getElementById("test2").innerHTML = tier3;
        }
    }} else {
        playerAlert = "Nothing happened";
        document.getElementById("test1").innerHTML = playerAlert;
    }
}

http://jsfiddle.net/9r73ntsc/1/

Answer 1

This will help you

function removeFunction() {
    if (document.getElementById("removePlayer").value !== "") {
        for (index = 0; index < tier1.length; index++) {
            if (document.getElementById("removePlayer").value == tier1[index]) {
                tier1.splice(index, 1);
                playerFunction();
                playerAlert = "Player Removed";
                document.getElementById("test1").innerHTML = playerAlert;
                document.getElementById("test2").innerHTML = tier1;
                return;
            }
            if (document.getElementById("removePlayer").value == tier2[index]) {
                tier2.splice(index, 1);
                playerFunction();
                playerAlert = "Player Removed";
                document.getElementById("test1").innerHTML = playerAlert;
                document.getElementById("test2").innerHTML = tier2;
                return;
            }
            if (document.getElementById("removePlayer").value == tier3[index]) {
                tier3.splice(index, 1);
                playerFunction();
                playerAlert = "Player Removed";
                document.getElementById("test1").innerHTML = playerAlert;
                document.getElementById("test2").innerHTML = tier3;
                return;
            }
        }
    }
    playerAlert = "Nothing happened";
    document.getElementById("test1").innerHTML = playerAlert;
}

EDIT: corrected final IF statement from tier2[index] to tier3[index]