How to delete in section that contain subsection

In my help dialog, a user can create section and subsection. I’m trying to implement a function where a user can delete a sections even if that section contain one or multiple subsection.

Right now: I can delete a single section if that section doesn’t have any subSection. I can also delete each subsection.

The Problem: Some reason I can not delete a section if that section have subsection. I want that function to delete the section and the subsections that it contains. I’m not sure why my code is not working so any help or suggestion will be really appreciated.

This is how my Database look like. (one to many relationship)

Id | Name | ParentId (reference to Id ) | Text

  1. BMW (section) | NULL | NULL
  2. How 2 fix bmw | 1 | This is how to fix bmw
  3. fix bmw part 2 | 1 | This is how to fix bmw part 2
mappedSections = [];

  delete(sec, isSection) {
    if (isSection) {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.id);
        this.mappedSections = this.mappedSections.filter(section => section.id != sec.id)
        if (~index) {
          this.HelpService.deleteHelp(sec.id).subscribe(() => {
            this.mappedSections = this.mappedSections.filter(subsection => subsection.id != sec.id);
            this.cdRefs.detectChanges()
          })
        }
      })
    } else {
      this.HelpService.deleteHelp(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.parentId);
        if (~index) {
          this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
        }
      })
    }
  }


enter image description here

Source: Angular Material Quesions