You can use facets to do this. For example, a simple test.app
:
<aura:application access="GLOBAL">
<aura:attribute name="messages" type="Aura.Component[]" access="GLOBAL"/>
<div aura:id="messages">
{!v.messages}
</div>
<ui:button label="Show Message" press="{!c.showMessage}"/>
</aura:application>
The corresponding testController.js
:
({
showMessage: function(component, event, helper) {
$A.createComponent("ui:outputText",
{value: "Message created at " + Date.now()},
function(cmp) {
component.set("v.messages", [cmp]);
setTimeout(function() {
$A.run(function() {
component.set("v.messages", []);
});
}, 5000)
});
}
})
The facet is an attribute of type Aura.Component[]
that you render in the desired spot using an expression such as {!v.messages}
. When the element is created, set the value of this facet to be an array with one component, the [cmp]
in the code. Set a timeout, etc., then set the value of this facet to be an empty array with []
. Make sure to wrap the calls with $A.run
.
If you use the Chrome or other tools to inspect the DOM, you'll see the component elements appear and disappear.
If this isn't what you're looking for, please provide more details.
Here is a sample code for the scenario
<aura:component>
<aura:attribute name="arrvals" type="integer[]" default="1,2,3,4,5"/>
<div aura:id="main">
<aura:iteration items="{!v.arrvals}" var="r">
<div aura:id="{!r.Id}" class="slds-page-header data-row" role="banner" onclick="{!c.showDetail}" data-id="{!r}" data-name="{!r}">
Hello List No {!r}
</div>
</aura:iteration>
</div>
The JS controller
({
showDetail: function(component, event, helper) {
var arr = [];
arr = component.find("main").getElement().childNodes;
console.log(event.target);
for(var cmp in component.find("main").getElement().childNodes) {
$A.util.removeClass(arr[cmp], "selectedRow");
}
var targetElement = event.target;
$A.util.addClass(targetElement,"selectedRow");
}
})
The CSS class
.THIS .data-row:hover {
background-color:#54698d;
color:white;
cursor:pointer;
}
.THIS .data-row.selectedRow{
background-color:#54698d;
color:white;
}
Demo
Best Answer
You can use Javascript Filter to remove same records.
reference :- https://stackoverflow.com/questions/19957348/javascript-arrays-remove-all-elements-contained-in-another-array