Question

我在javascript中创建了一个简单的应用程序。应用程序是从下拉列表中选择一个值，如果单击它旁边的按钮，则在下拉列表中选择的指定数量的texbox将添加到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);
    }
}

如何删除锚点标记左侧的文本框，单击该文本框。例如：

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

如果最后一个＆＃34;删除（x）＆＃34;单击，然后应删除最后一个文本框，因此左侧的文本框。

我该怎么做？

注意： 请不要使用JQuery解决方案！我甚至可以做到这一点：P。

Answer 1

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

如果您传递了input1的ID a，请使用ID input1Text作为相对文字框，

因此，当您点击特定链接时，您将获得a input1并获取带有'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);
    }
}

Answer 2

试试这个

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

删除锚标记的相应文本框

2 个答案: