Scenario:

I have a component that has an <aura:renderIf> within an <aura:iteration>. The <aura:iteration> references a component attribute called "selectedItems" to display a list of items, accompanied by a delete button. When the delete button is clicked, the following actions are performed on the Controller:

1. var selectedItem = component.get('v.selectedItems');
2. selectedItems.splice() the event.target.value
3. component.set('v.selectedItems', selectedItems);


Problem:

Uncaught TypeError: a.getAttribute is not a function appears.


Other observations:

Aside from the error message, the delete button functions as expected.


Attempted fixes:

1. I have tried to wrap either the <aura:renderIf> or the <aura:iteration> in a <span> without success as instructed in the stack exchange link below.

http://salesforce.stackexchange.com/questions/71604/lightning-bug-in-lightning-framework-when-using-aurarenderif

2. When the code updating the component attribute is removed, there's no error, but the delete button does not function as desired.

3. Changing splice() to pop() still shows the error, but only if the delete button of the last item is clicked. The delete button does not function as desired.

4. The <aura:iteration> in the component was stripped down to just the delete button with an onclick controller event and a value attribute of an ID, while the controller was also stripped down to the component.get('v.selectedItems'), selectedItems.splice() based on event.target.value, then component.set(). Still shows the error even though the item is deleted.

Component

<aura:attribute name="selectedItems" type="sObject[]" /> 
....
<aura:iteration items="{!v.selectedItems}" var="obj">
    <tr>
        <td>
            <button type="button" class="btn btn-default" onclick="{!c.removeItem}" value="{!obj.x__Lookup_ID__c}">
                Del
            </button>
        </td>
    </tr>
</aura:iteration>

Controller

removeItem : function(component, event, helper) {
        var target = event.target.value;
        var selectedItems = component.get('v.selectedItems');
        
        for (var i = 0; i < selectedItems.length; i++) {
            if (target == selectedItems[i].x__Lookup_ID__c) {
				selectedItems.splice(i, 1);
            }
        }
        
        component.set('v.selectedItems', selectedItems);
    }

Question:

How do I make the problem go away?