I've read through most of the questions on this issue of ability to remove an item dynamically from DOM, and did understand that this might not be possible.
So I would like to extend the question to query for, if there is a better way available performance wise, to remove a dynamically added child lightning component from parent components' DOM?
Currently, I've 2 components:
- Parent CMP
- List of Child CMPs
The Child Components are added to Parent Component body dynamically by putting a Component.Aura type attribute in component. This attribute would be a list or array of components added. Now, if I want to remove/delete a component at index 2, from the total list of components say 20, the full DOM seems to be regenerated, if I simply do:
var items = component.get("v.items"); items.slice(index, 1); component.set("v.items", items);
This I think is happening because I am resetting the attribute with array variable after removing one from the list.
This seems to be inducing a significant delay in browser being frozen for few seconds, when the list has like 15-20 items in display. I was thinking if there is a better and faster way to simply remove the item I've identified to be removed from DOM?