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!";
        }
    }
}

My script here dynamically adds up to 10 fields where users will be able to enter an email address and to the right of the text box i add an image of a minus sign that calls another script. I’m having trouble working out how to assign and keep track of the minus signs. I need to be able to have the minus sign script’s recognize the text box it is by and remove it. I can write the remove script easily enough but I’m unsure of how to tell the image which text box to remove. Any help, suggestions, or comments are greatly appreciated.

Thanks,
Nick S.

Answer 1

You can add a class to the field called minus and then check through like that. I would suggest using jquery for this.

To add the class

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

To remove all elements with that class

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