Remove ion item divider - ionic-framework

Question

How I can remove <ion-item> divider? I have the following code to show 4 items in a row:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.
I tried to set style="border:none" but it didn't do it.

Answer 1

This is for ionic 2 and 3. Please refer to this answer for higher versions of ionic
use no-lines
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item no-lines color="dark"><!-- here -->
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>

Answer 2

For whatever reason, this didn't work for me.
But having lines="none" worked great.
For ionic v4
<ion-item lines="none">...</ion-item>
Pulled from ionic docs. https://ionicframework.com/docs/api/list

Answer 3

For ionic v4, you should use the lines property:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item lines="none" color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>

Answer 4

Apply this for Ionic V4. Really it will work.. Happy coding
<ion-item lines="none">
</ion-item>

Answer 5

If you want to disable the lines / borders globally on all of your <ion-item>'s, just add the following code to your src/global.scss (default when generating a Ionic v4 App with Angular) of your application.
ion-item {
--border-width: 0;
--inner-border-width: 0;
}
The attribute lines="none" on a <ion-item> does nothing other.
Hope it helps someone.
Cheers
Unkn0wn0x

Answer 6

I tried with no-line but it didn't work in ionic 4
Only this work for me in ionic 4 :
<ion-item lines="none"> </ion-item>
<ion-list>
<ion-item lines="none" button detail *ngFor="let note of notesService.notes">
<ion-label>{{ note.title }}</ion-label>
</ion-item>
</ion-list>

Answer 7

I am on ionic 4, and lines="none" somethimes don't work.
So I use this line.
ion-list:not(.list-lines-none) ion-item::before{
border-width: 0 !important;
}
And this is my ionItem example. (It has hidden error property also)
<IonItem lines="none" detail={false}>
<IonIcon
className="w-40 h-40 float-left"
src="/assets/icon/store-black.svg"
/>
<IonLabel className="flex flex-col ml-10">
<h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
<span className="text-sm leading-tight">Kratki opis</span>
</IonLabel>
<IonIcon
className=" absolute top-50 right-30 w-15 h-15"
src="/assets/icon/arrow-right.svg"
/>
</IonItem>

Answer 8

use (lines="none") in your ion-item