Removing Dynamic jQuery Fields

[Presto-X]

Hello everyone,

 

I'm working on a set of dynamic form fields, I have the script adding the fields correctly, the script keeps track of how many fields there are so I can limit to a total of 5, I also have a message next to the add button that counts down with each form field added.  What I need help with is how to remove one of the fields and add a number back to the amount of available fields, and re-enable the add button.  I setup a jsFiddle script so you could see it in action:  http://jsfiddle.net/Presto/KbNDR/

 

It seems like I almost have it working  :-\

 

Here is my HTML

<table class="table table-striped table-bordered table-condensed"><tbody id="coauthors"><tr id="row0"><td><div id="AddFormField" class="btn btn-warning" style="float:right;"><i class="icon-plus-sign icon-white"></i> Add</div><div id="remainingAuthors" style="padding:6px 8px 0 0; float:right; font-weight:bold;">5 Authors Remaining</div></td></tr></tbody></table>​

And here is my JavaScript

$(document).ready(function() {
    var DefaultNumber = 1;
    $('div#AddFormField').live("click", function() {
        var inputs = '<tr id="row' + DefaultNumber + '"><td><input type="text" name="first_name[]" id="first_name' + DefaultNumber + '" class="inputbox span2" style="margin-bottom:0;" value="Author\'s Name" onfocus="if(this.value==\'Author\\\'s Name\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'Author\\\'s Name\'};" /> <input type="text" name="femail[]" id="femail' + DefaultNumber + '" class="inputbox span2" style="margin-bottom:0;" value="Author\'s Email" onfocus="if(this.value==\'Author\\\'s Email\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'Author\\\'s Email\'};" /> <div class="RemoveFormField btn btn-mini btn-warning"><i class="icon-trash icon-white"></i></div></td></tr>';
        if(DefaultNumber <= 5){
            $('#coauthors').append(inputs).DefaultNumber++;
            if(DefaultNumber == 5){
                $('div#AddFormField').addClass('disabled');
            }
            var remainingAuthors = 5 - DefaultNumber++;
            $('div#remainingAuthors').html(remainingAuthors + ' Authors Remaining');
        }else{
            return;
        }
    });
    $('div.RemoveFormField').live("click", function() {
        $(this).parent().parent().remove().DefaultNumber++;
        $('div#remainingAuthors').html(DefaultNumber + ' Authors Remaining');
        if(DefaultNumber <= 4){
            $('div#AddFormField').removeClass('disabled');
        }
    });
});​

[Presto-X]

At last I was able to get the script working, hopefully someone else may find use for this down the road.  http://jsfiddle.net/Presto/cFeF3/

 

<table class="table table-striped table-bordered table-condensed">
          <tbody id="coauthors">
            <tr id="row0">
              <td>
                <div id="AddFormField" class="btn btn-warning"><i class="icon-plus-sign icon-white"></i> Add</div>
                <div class="remainingAuthorsWrapper"><span id="remainingAuthors">5</span> Authors Remaining</div>
              </td>
            </tr>
          </tbody>
        </table>

$(document).ready(function() {
var row = 1;
$('div#AddFormField').live("click", function() {
	var remainingAuthors = parseInt($('#remainingAuthors').text());
	var inputs = '<tr id="row' + row + '"><td><input type="text" name="first_name[]" id="first_name' + row + '" class="inputbox span2" style="margin-bottom:0;" value="Author\'s Name" onfocus="if(this.value==\'Author\\\'s Name\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'Author\\\'s Name\'};" /> <input type="text" name="femail[]" id="femail' + row + '" class="inputbox span2" style="margin-bottom:0;" value="Author\'s Email" onfocus="if(this.value==\'Author\\\'s Email\'){this.value=\'\'};" onblur="if(this.value==\'\'){this.value=\'Author\\\'s Email\'};" /> <div class="RemoveFormField btn btn-mini btn-warning"><i class="icon-trash icon-white"></i></div></td></tr>';
	if(remainingAuthors > 0){
		$('#coauthors').append(inputs).remainingAuthors - 1;
		if(remainingAuthors == 1){$('div#AddFormField').addClass('disabled');}
		remainingAuthors--;
		$('#remainingAuthors').text(remainingAuthors);
		row++;
	}else{
		return;
	}
});
$('div.RemoveFormField').live("click", function() {
	var remainingAuthors = parseInt($('#remainingAuthors').text());
	$(this).parent().parent().remove();
	remainingAuthors++;
	$('#remainingAuthors').text(remainingAuthors);
	if(remainingAuthors < 5){
		$('div#AddFormField').removeClass('disabled');
	}
});
});