Code for the post ILM blog post Building Rich Web Apps: jQuery & MVC vs. Angular.js & WebAPI

edit.js.add-snippet

//ID selectors are less than ideal due to conflict potential, but often necessary with jQuery
var $tbody = $('#grid').find('tbody'); 

//the template for another item, the index will replace ###
var todoListTemplate = $('#item-template').html();

$('#addTodo').on('click', function (e) {

	var nextItemIdx = $tbody.find('tr').length;

	//the template for another item, the index will replace ###
	var nextItem = todoListTemplate.replace(/###/g, nextItemIdx);

	$tbody.append(nextItem);

	//block click handler bubble, don't forget or this will cause the form to post!
	return false; 
});

edit.js.delete-snippet

$('.delete-todo').on('click', function (e) {
    var $deleteTargetRow = $(e.target).closest('tr');
    var $siblingsAfter = $deleteTargetRow.nextAll();

    $deleteTargetRow.remove();

    $siblingsAfter.each(function () {

        //shift indexes accordingly so the MVC model binder still functions server side
        //and client validation still works client side
        var $row = $(this);

        var newIndex = $row.index();
        var oldRowNbr = newIndex + 2;
        var newRowNbr = newIndex + 1;

        //re-wire up elements with ids
        //so client side validation still works
        $row.find('[id]').each(function () {
            this.id = this.id.replace("_" + oldRowNbr + "__", "_" + newRowNbr + "__");
        });

        //rewire up elements with indexor for client validation and server side model binding to work
        $row.find('[id]').each(function () {
            this.id = this.id.replace("_" + oldRowNbr + "__", "_" + newRowNbr + "__");
        });

        $row.find('[data-valmsg-for]').each(function () {
            var current = $(this).prop('data-valmsg-for');
            $(this).prop('data-valmsg-for', current.replace("[" + oldRowNbr + "]", "[" + newRowNbr + "]"));
        });

        $row.find('[name]').each(function () {
            this.name = this.name.replace("[" + oldRowNbr + "]", "[" + newRowNbr + "]");
        });

    });

    return false; //block click handler bubble
});

TodoList.cshtml.template-snippet

<tr>
	<td>
		<input data-val="true" data-val-required="The IsCompleted field is required." id="Items_###__IsCompleted" name="Items[###].IsCompleted" type="checkbox" value="false" >
		<input name="Items[###].IsCompleted" type="hidden" value="false">
		<span class="field-validation-valid" data-valmsg-for="Items[###].IsCompleted" data-valmsg-replace="true"></span>
	</td>
	<td>
		<input data-val="true" data-val-required="The Task field is required." id="Items_###__Task" name="Items[###].Task" type="text" >
		<span class="field-validation-valid" data-valmsg-for="Items[###].Task" data-valmsg-replace="true"></span>
	</td>
	<td>
		<select data-val="true"
				data-val-number="The field Priority must be a number." 
				data-val-range="The field Priority must be between 1 and 10." 
				data-val-range-max="10" 
				data-val-range-min="1" 
				data-val-required="The Priority field is required." 
				id="Items_###__Priority" name="Items[###].Priority">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		</select>
		<span class="field-validation-valid" data-valmsg-for="Items[###].Priority" data-valmsg-replace="true"></span>
	</td>
	<td>
		<button class="btn btn-danger delete-todo">
			<span class="glyphicon glyphicon-remove-sign"></span>
		</button>
	</td>
</tr>