Removing the corresponding textbox of the anchor tag

Question

I have created a simple application in javascript. The application is that a value is selected from a dropdown list and if the button next to it is clicked then the specified number of texboxes selected in the dropdown are added to the DOM with a a to their right sides.

Here's the HTML:

<form>
    <select style="width: 250px;" id="numMembers" <!--onchange="addMembers();" -->>
        <option value="0">Add More Members...</option>
        <script>
            for (var i = 1; i <= 10; i++) {
                document.write('<option value=' + i + '>' + i + '</option>');
            };
        </script>
    </select>
    <button onclick="addMembers();" type="button">Add</button>
    <div style="margin-top: 10px; border: 1px solid #eee; padding: 10px;">
        <input type="text" />
        <br/>
        <input type="text" />
        <br/>
        <input type="text" />
        <br/>
    </div>
    <div id="extras"></div>
</form>

And here's the script:

function addMembers() {
    var num = document.getElementById("numMembers").options["selectedIndex"];
    for (var i = 0; i < num; i++) {
        var lineBreak = document.createElement("br")

        var txtInput = document.createElement("input");
        txtInput.type = "text";
        txtInput.style.display = "inline";

        var removeHref = document.createElement("a");
        removeHref.href = "#";
        removeHref.innerHTML = "Remove(x)";
        removeHref.style.marginLeft = "5px";
        removeHref.style.display = "inline";
        removeHref.onclick = function () {
            document.removeChild(this);
        };

        document.getElementById("extras").appendChild(lineBreak);
        document.getElementById("extras").appendChild(txtInput);
        document.getElementById("extras").appendChild(removeHref);
    }
}

How can I remove the textbox on the left of the anchor tag which is when clicked. For example:

[XXXXXXX]  Remove(x)
[XXXXXXX]  Remove(x)

If the last "Remove(x)" is clicked then the last textbox should be removed hence the one to the left of it.

How can I do it?

Note: No JQuery solutions please! I could do that even myself :P.

Answer 1

You can pass the id on anchorTag and can pass same id with some addition for input text, like

If you pass the id input1 for a then use the id input1Text for relative text box,

So you when you click on particular link, you will get a with input1 and get relative input text with 'input1Text'. This would be apply for input2, input3, ... Something like this.

DEMO

function addMembers() {
    var num = document.getElementById("numMembers").options["selectedIndex"];
    for (var i = 0; i < num; i++) {
        var lineBreak = document.createElement("br")

        var txtInput = document.createElement("input");
        txtInput.type = "text";
        txtInput.id = "input"+i+"Text"; //give the id with Text
        txtInput.style.display = "inline";

        var removeHref = document.createElement("a");
        removeHref.href = "#";
        removeHref.innerHTML = "Remove(x)";
        removeHref.style.marginLeft = "5px";
        removeHref.style.display = "inline";
        //when you click on this link you will get relative textbox by "input"+i+"Text";
        removeHref.id = "input"+i; 
        removeHref.onclick = function () {
            var removeNodeText = document.getElementById(this.id+"Text");
            removeNodeText.parentNode.removeChild(removeNodeText);
            var removeNodeLink = document.getElementById(this.id);
            removeNodeLink.parentNode.removeChild(removeNodeLink);
        };

        document.getElementById("extras").appendChild(lineBreak);
        document.getElementById("extras").appendChild(txtInput);
        document.getElementById("extras").appendChild(removeHref);
    }
}

Answer 2

Try This

function addMembers() {
            var num = document.getElementById("numMembers").options["selectedIndex"];
            for (var i = 0; i < num; i++) {
                var lineBreak = document.createElement("br")

                var txtInput = document.createElement("input");
                txtInput.id = "text_"+i;
                txtInput.type = "text";
                txtInput.style.display = "inline";

                var removeHref = document.createElement("a");
                removeHref.href = "#";
                removeHref.id = "href_"+i;
                removeHref.innerHTML = "Remove(x)";
                removeHref.style.marginLeft = "5px";
                removeHref.style.display = "inline";
                removeHref.onclick = function(){
                    var id= this.id.split('_')[1];
                    console.log(id)
                    document.getElementById("extras").removeChild(document.getElementById('text_'+id));
                    document.getElementById("extras").removeChild(this);
                }

                document.getElementById("extras").appendChild(lineBreak);
                document.getElementById("extras").appendChild(txtInput);
                document.getElementById("extras").appendChild(removeHref);
            }
        }