What causes a page refresh with this splice ()?

Question

I do not know how to formulate a better heading, because I obviously do not quite understand what is happening.

Given this plunkr, where I recreated my problem:
http://plnkr.co/edit/vaj5peVpteYQx4iZd3pw?p=preview

this.items.splice(i, 1); -> refresh  
this.items.splice(i - 1, 1); -> or any other i (not the target of the method) no refresh

Can someone explain to me why:
Adding Cabron is fine.
Removing Cabron with the removeALT method is great.
But instead of removing the same Cabron with the remote button removed by default, does the Cabron button force the page to refresh?

Playback:
1) Click "add Hello" (in fact, this is not part of the test)
2) Click "Less Cabron", and the page will refresh.
2 OR) Click “More Cabron” or “Less Cabron ALT” and the page will not refresh (although the form has been resized and is very similar to “Less Cabron”).

I am trying to give the ability to add / delete / move / move fields in a form.

I could do weird things with css and always use "i +/- x", but I would prefer to figure out how to avoid this.
Also in my application (which runs in the external window [window.open ()]), the URL of the window changes with the parameters of the spliced ​​object passed as URL parameters (I don’t know why).

example: [starting url, after here is all inserted from that bug]?title=Cabron

Answer 1

type="button" , submit. type="submit" .

<button type="button" (click)="add(i)">More Cabron</button>

.

---

preventDefault() arg.

Html

<button (click)="add(i,$event)">More Cabron</button>

add(i,$event) {
  $event.preventDefault();
  // rest of code

---

. type . .

, , , , .

---

( )... splice (i, 1) . splice (anotherElement, 1) , " Angular?...

, , , , , submit, . , ( ), , .