Question

var intFields = 0;
var maxFields = 10;
function addElement() {
    "use strict";
    var i, intVal, contentID, newTBDiv, message = null;
    intVal = document.getElementById('add').value;
    contentID = document.getElementById('content');
    message = document.getElementById('message');
    if (intFields !== 0) {
        for (i = 1; i <= intFields; i++) {
            contentID.removeChild(document.getElementById('strText' + i));
        }
        intFields = 0;
    }
    if (intVal <= maxFields) {
        for (i = 1; i <= intVal; i++) {
            intFields = i;
            newTBDiv = document.createElement('div');
            newTBDiv.setAttribute('id', 'strText' + intFields);
            newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
            contentID.appendChild(newTBDiv);
            message.innerHTML = "Successfully added " + intFields + " fields.";
        }
    } else {
        for (i = 1; i <= maxFields; i++) {
            intFields = i;
            newTBDiv = document.createElement('div');
            newTBDiv.setAttribute('id', 'strText' + intFields);
            newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>";
            contentID.appendChild(newTBDiv);
            message.innerHTML = "Unable to create more than 10 receipient fields!";
        }
    }
}

我的脚本动态添加最多10个字段，用户可以在其中输入电子邮件地址，在文本框的右侧，我添加了一个调用另一个脚本的减号图像。我无法确定如何分配和跟踪减号。我需要能够让减号脚本识别它所在的文本框并将其删除。我可以很容易地编写删除脚本，但我不确定如何告诉图像要删除哪个文本框。非常感谢任何帮助，建议或评论。

谢谢，尼克S.

Answer 1

您可以在名为minus的字段中添加一个类，然后像这样检查。我建议使用jquery。

添加班级

$("#element").addClass("minus");

删除该类的所有元素

$("body input").each(function (i) { 
    if($(this).attr("class") == "minus"){
       $(this).remove();
    }
});

Answer 2

两个最佳选项imo将是1）DOM遍历，或2）操纵ID片段。

在第一种方式下，您将传递对发生事件的元素的引用（减号），然后从那里导航DOM到获取相应的文本框（在jQuery中您可以使用{{1} }，例如）。

在第二种方式下，您可以为触发元素的ID（减号）分配前缀或后缀，并为目标元素（文本框）指定相同的前缀或后缀。然后，您可以（再次）通过对触发元素中的ID进行简单的字符串操作，为目标元素生成适当的ID。

这足以让你入门吗？

Answer 3

尝试在字段中添加一个类，并将相同的类添加到减号。

所以在setAttribute id之后添加它，

newTBDiv.setAttribute('class', 'field' + intFields);

然后删除任何具有该类的元素。

如何动态地为图像分配ID

3 个答案: