javascript - 移除 anchor 标签对应的文本框

Question

我用 javascript 创建了一个简单的应用程序。应用程序是从下拉列表中选择一个值，如果单击它旁边的按钮，则将在下拉列表中选择的指定数量的文本框添加到 DOM 中，并在其右侧添加一个 a .

这是 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>

这是脚本:

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);
    }
}

如何删除单击时 anchor 标记左侧的文本框。例如:

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

如果单击最后一个“Remove(x)”，则应删除最后一个文本框，即它左侧的文本框。

我该怎么做？

注意: 请不要使用 JQuery 解决方案!我什至可以自己做 :P。

Answer 1

您可以在 anchorTag 上传递 id 并且可以传递相同的 id 并为输入文本添加一些内容，例如

如果您为 a 传递了 id input1，那么使用 id input1Text 作为相关文本框，

因此，当您单击特定链接时，您将通过 input1 获得 a 并通过“input1Text”获得相关输入文本。这适用于 input2、input3、 ... 类似这样的情况。

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);
    }
}