Javascript Function to add/remove fields

问题

I'm not very experienced with JavaScript, but this code was similar to what I was looking for , especially where it includes the 'Remove Field' link. Here is the Javscript function:

//Add more fields dynamically.
function addField(field,area,limit) {
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area);
    var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
    //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
    //      field given in the argument is 'friend_' the last id will be 'friend_4'.
    var last_item = all_inputs.length - 1;
    var last = all_inputs[last_item].id;
    var count = Number(last.split("_")[1]) + 1;

    //If the maximum number of elements have been reached, exit the function.
    //      If the given limit is lower than 0, infinite number of fields can be created.
    if(count > limit && limit > 0) return;

    if(document.createElement) { //W3C Dom method.
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = field+count;
        input.name = field+count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
    } else { //Older Method
        field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
    }
}

Here is the HTML for the form:

<form name="frm" method="POST">
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>

However, I would like the additional fields to generate with the 'Remove Link' code, not just the ones with code in the script. I understand that the custom functions have to be adjusted to include that behavior, but am having all kinds of trouble trying to get that function to work. It seems straightforward to do it in the older method following the "} else {" at the bottom of the addField function by editing the code to read:

} else { //Older Method
    field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>";
}

However, I'm stumped as to how to include it in the W3C DOM method?

回答1:

I'm going to differ with Kappa and encourage you strongly to keep doing what you're doing. JQUery is great for what it is, but it is too often a crutch, and it's so important to know what you're doing and why you're doing it when working with javascript. Especially if you are learning to get a job in the sector, you will need straight JavaScript.

The good news, what you're trying to do is actually quite simple!

    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = field+count;
    input.name = field+count;
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    removalLink = document.createElement('a');
    removalLink.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode)
    }
    removalText = document.createTextNode('Remove Field');
    removalLink.appendChild(removalText);
    li.appendChild(removalLink);

Here's the code on JSFiddle: http://jsfiddle.net/r9bRT/

回答2:

Remove those if(!document.getElementById) and if(document.createElement) conditions. Every browser supports them, and those which not are not worth to be supported (Let them throw their errors).

To add the remove-method to DOM-created elements, just use the onclick property. You can also use standard-compliant addEventListner(), but this needs some workarounds for IE. See sections Legacy Internet Explorer and attachEvent and Older way to register event listeners.

So the code would be

...
li.appendChild(document.createTextNode(" ");
var a = document.createElement("a");
a.appendChild(document.createTextNode("Remove Field"));
a.style = "cursor:pointer;color:blue;";
a.onclick = function() {
    // this.parentNode.parentNode.removeChild(this.parentNode);
    // nay. we have better references to those objects:
    field_area.removeChild(li);
};
li.appendChild(a);

http://jsfiddle.net/wtX7Y/2/