title: How to delete sub section in Angular
body: <p>I have Section and Subsection.</p>
  <p>I can remove the section completely(frontend and backend) but I'm not sure why for my Subsection, I can't remove in the front end. It deleted in the backend but I don't see anychanges in the frontend when I try to delete the subsection.</p>
  <p>Also Any Help or recommendation on how I can combine those two functions will be really appreciated.</p>
  <pre><code>&lt;p&gt;Section&lt;/p&gt;
  &lt;div fxLayout=&quot;row&quot; fxLayoutAlign=&quot;space-between center&quot; fxLayoutGap=&quot;10px&quot;&gt;
  &lt;input type=&quot;text&quot; (ngModelChange)=&quot;sectionNameChanged($event,section)&quot; fxFlex [(ngModel)]=&quot;section.sectionName&quot; &gt;
  &lt;span class=&quot;material-icons&quot; (click)=&quot;deleteSection(section)&quot;&gt;delete&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Subsection&lt;/p&gt;
  &lt;div style=&quot;margin-left: 20px;&quot; *ngFor=&quot;let subsection of section.subSections&quot;&gt;
      &lt;input type=&quot;text&quot; (ngModelChange)=&quot;subsectionNameChanged($event,subsection)&quot; fxFlex [(ngModel)]=&quot;subsection.sectionName&quot; &gt;
      &lt;span class=&quot;material-icons&quot;(click)=&quot;deleteSubsection(subsection)&quot; &gt;delete&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>  public mappedSections = [];
  
   fetchData =  () =&gt;{
      this.HelpService.getHelpSection().subscribe(sections=&gt;{
        this.HelpService.getHelpSubsection().subscribe(subsections=&gt;{
          this.mapData(sections,subsections)
  
        })
      })
    }
  
    mapData = (sections,subsections)=&gt;{
      this.mappedSections = sections.map(section=&gt;{
        const sSections = subsections.filter(subsection=&gt; subsection.parentId===section.id);
        if(sSections.length){
          section.subSections = sSections;
        }else{
          section.subSections = [];
        }
        return section;
      })
      console.log('mapped sections',this.mappedSections);
    }
  
    deleteSection(sec){
      this.HelpService.deleteHelpSection(sec).subscribe(()=&gt;{
        this.HelpService.deleteHelpSubsection(sec.id).subscribe(()=&gt;{
          this.mappedSections = this.mappedSections.filter(section=&gt; section.id!=sec.id);
        })
      })
    }
  
    deleteSubsection(sec){
        this.HelpService.deleteHelpSubsection(sec.id).subscribe(()=&gt;{
          this.mappedSections = this.mappedSections.filter(subsection=&gt; subsection.id!=sec.id);
        })
    }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/PLwB1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PLwB1.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/LVHeW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVHeW.png" alt="enter image description here" /></a></p>