In the child component i have defined a button to delete the required details and in controller i am performing the action to delete the list. But still not getting the desired result. please help me with the solution.

Child component Code :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

    <aura:attribute name="Institutename" type="string" default=""/>

    <aura:attribute name="CourseName" type="string" default=""/>

    <aura:attribute name="DurationFCourse" type="string" default=""/>

    <aura:attribute name="NoFhoursStudy" type="string[]" default=  ", Less then 35% ,In between 35% and 65%,
                                                                  In between 65% and 80%, Above 80%," />

    <aura:attribute name="overallScore" type="string" default=""/>

    <aura:attribute  name = "PageSubHeading" type= "String" default= "Enter Your Educational Details here->"/>

    <aura:attribute name="EducationDetailsListInnerComponent" type="List" />

    <aura:attribute name="indexNo" type ="Integer"/>
    <aura:attribute name="sequenceNo" type = "Integer"/>

    <div class="slds-m-top--xx-large">
    <div class="slds-page-header">
    <div class="slds-align--absolute-center">
    <div class="slds-text-heading--small">

        {!v.PageSubHeading} {!v.indexNo}    </div>    
    <br/> <br/>

    <lightning:input label="Enter Your Institute Name" name="InstituteName" value="{!v.InstituteName}" />

    <lightning:input label="Enter Your course name" name="CourseName" value="{!v.CourseName}" />

    <lightning:input label="Enter Your Course Duration (in years)" name ="courseDuration" value="{!v.DurationFCourse}" />

    <lightning:select label="What is your overall score in this course?" name="OverallScore" value="{!v.overallScore}">

    <aura:iteration items="{!v.NoFhoursStudy}" var="hrs">
        <option value="{!hrs}" text="{!hrs}" />

    <lightning:button iconName="utility:delete" variant="border-filled" label="Delete this Education details" onClick="{!c.deleteDetails}">


Controller logic:

deleteDetails : function(component, event, helper) {

    var NewEducationdetaislList = component.get("v.EducationDetailsListInnerComponent");
    var currentIndex = component.get("v.indexNo");
    if(currentIndex > -1)

  • 3
    Could you please be more specific about how it "doesn't work"? Does it throw an exception? Log something to the console? Behave strangely, and if so, how? – David Reed Oct 11 '18 at 2:02
  • When I am clicking on the delete button on lightning page dosen't perform any action. – Abhijeet Kumar Oct 11 '18 at 2:17

Your this question seems to be very similar to the one you asked here where you again have case-sensitivity issues.

Based on your comment:

When I am clicking on the delete button on lightning page dosen't perform any action.

The reason being here that on your delete button as below:

<lightning:button iconName="utility:delete" variant="border-filled" label="Delete this Education details" onClick="{!c.deleteDetails}">

It should be onclick, instead of onClick.

I will strongly recommend you to go through your code first and try to troubleshoot any such issues. These are some of the issues which can be resolved by some basic code scanning, especially if you are copy pasting contents from elsewhere.

  • <lightning:button iconName="utility:delete" variant="border-filled" label="Delete this Education details" onclick="{!c.deleteDetails}"></lightning:button> i corrected it but still facing the same issue – Abhijeet Kumar Oct 11 '18 at 3:16
  • @AbhijeetKumar You need to review your code. I literally copy/pasted what you have here, fixed the onclick thing and it just works. You have something missing in your code somewhere. I am not sure what you are expecting that button to do, but just try putting an alert/console.log and you will see the flow getting in the function. – Jayant Das Oct 11 '18 at 3:20
  • Actually i have created a list in the parent component, and for the button "Add educational details here" i am increasing the size of the list where as in the child component on the click of delete button i am trying to decrease the size of that list.. – Abhijeet Kumar Oct 11 '18 at 3:47
  • Parent controller here :-- addDetails: function(component,event,helper){ console.log("Add Educational Details"); var CurrentEducationdetailsList = component.get("v.EducationalDetailsList"); var currentSize = parseInt((CurrentEducationdetailsList.length)); var NewSize = parseInt((currentSize.length) + 1); CurrentEducationdetailsList.push(NewSize); component.set("v.EducationalDetailsList", CurrentEducationdetailsList); } }) – Abhijeet Kumar Oct 11 '18 at 3:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.