Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,1 +1,0 @@
-<p>detail-planner works!</p>
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.spec.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,25 +1,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DetailPlannerComponent } from './detail-planner.component';
-
-describe('DetailPlannerComponent', () => {
-  let component: DetailPlannerComponent;
-  let fixture: ComponentFixture<DetailPlannerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DetailPlannerComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DetailPlannerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
Index: trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/detail-planner/detail-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ 	(revision )
@@ -1,15 +1,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-detail-planner',
-  templateUrl: './detail-planner.component.html',
-  styleUrls: ['./detail-planner.component.css']
-})
-export class DetailPlannerComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -38,5 +38,5 @@
                                 </td>
                                 <td>
-                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
+                                    <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" (click)="onClickRemoveLocation(planner, location)"></button>
                                 </td>
                             </tr>
Index: trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -3,4 +3,5 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { PlannerDto } from 'src/app/_models/dto/plannerDto';
+import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
 import { Location } from 'src/app/_models/location';
 import { Planner } from 'src/app/_models/planner';
@@ -21,5 +22,5 @@
   id: number;
   locations: Location[];
-
+  plannerLocationDto: PlannerLocationDto;
 
   constructor(private router: Router, private route: ActivatedRoute, private fb: FormBuilder, private plannerService: PlannerService,
@@ -33,4 +34,5 @@
     this.id = 1;
     this.locations = [];
+    this.plannerLocationDto = new PlannerLocationDto();
   }
 
@@ -64,5 +66,5 @@
   }
 
-  private updatePlanner() {
+  updatePlanner() {
     this.plannerService.updatePlanner(this.id, this.form.value)
       .pipe()
@@ -81,6 +83,17 @@
   }
 
-  onClickRemoveLocation(id : number){
-    
+  onClickRemoveLocation(planner: Planner, location: Location) {
+    planner.id = this.id;
+
+    this.plannerLocationDto.plannerId = planner.id;
+    this.plannerLocationDto.locationId = location.id;
+    console.log(this.plannerLocationDto.plannerId);
+    console.log(this.plannerLocationDto.locationId);
+    this.plannerService.deleteLocationFromPlanner(this.plannerLocationDto).subscribe(
+      data => {
+        console.log("deleted")
+      }
+    );
+    window.location.reload();
   }
 }
Index: trip-planner-front/src/app/planner/planner.component.ts
===================================================================
--- trip-planner-front/src/app/planner/planner.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
+++ trip-planner-front/src/app/planner/planner.component.ts	(revision 76712b2bf7daeb245c9ca388ce322e0b98098d99)
@@ -72,5 +72,5 @@
         this.messageService.add({ severity: 'success', summary: 'The planner: ' + plannerDto.name + ' has been created.' });
       }
-      
+
     });
 
