Remove ion-item from ion-list by pressing button

Ionic Framework ionic-v3
1

Hey :slight_smile:

I’m trying to remove ion-item by pressing on remove button , any ideas how to do it?

Thanks in advance

image

2

Change your remove button to:

<button danger (click)="removePost(post)">

then in your class definition:

removePost(post){
    let index = this.posts.indexOf(post);

    if(index > -1){
      this.posts.splice(index, 1);
    }
}
10 Likes
3

Thanks for this bro, works like a charm :sunglasses:

4

Hi All,

I’m fairly new to Ionic 2. Just a few short weeks of usage. I am doing the above, and all is working very well.

However, I am trying to get the ionSwipe working–this event is firing just fine, the code is running just fine, it is just the item is not removed from the list, not until the list is interacted with in some way.

I have tried closing the item first, both via the List’s closeSlidingItems method and the sliding Item’s close method–both to no avail.

I have tried putting a delay in the code, before removing the item–so that it is fully closed first–again to no avail.

I realize beta 9&10 are recent and might have a few bugs, just wondering if anyone has got this working with ionSwipe?

John

UPDATE: A bit of a kludge on my part, but with the ItemSwipe reference, I was able to set the CSS Style Display to none. While this works, it’s not very elegant. Especially as I have Groups in my list and they are not removed. If I find a better solution, I will share

5

Hi, joshmorony I always watch and learn from your awesome youtube tutorials. I used the same method and delete the post. but when I refresh it it appears again. if my client don’t want to see a post after he deletes it what should i do. Thanks for your great work.

6

That depends entirely on how you’re retrieving the posts. From the sound of it you’re loading the posts from somewhere, yes? If so, you also need to delete the post from the stored posts.

7

Thanks SigmundFroyd . I am fetching posts from WordPress. If one of my app user wants to delete it and the other want to keep it. in this situation I can not delete from server. Am I right? This is my confusion and I am looking for some solution. Thank you for your reply. I would love to get any other suggestion please. Regards

8

Create a local storage of items marked as deleted and use this to filter the wordpress feed

9

Yeah in that case I’d probably do something like what @Tommertom has suggested. I assume WordPress returns an ID of some sort for each post.

10

And if there is no id, use a hashing algo to create one

Have done so myself for a rss reader

Tom

11

Thank you @Tommertom for valuable suggestion. I am very new in Programming and sometimes few simple things become very complex for me. I am going to try and see how I achieve what you suggested though I have no idea so far. Regards

12

Thanks @SigmundFroyd great forum and great help.

13

I am fetching posts from WordPress blog with wp-api in IONIC 3.
User can delete the post with splice() function. The deleted post then go to an array called deletedPosts. Next time when user refresh the page by pulling the content down I want my Original array to filtered out through deletedPosts Array and then show the new result (filteredPosts) to user. Please note that every post in WordPress has unique “id” and I want to use this as filter argument.
Array 1 is Posts
Array 2 is deletedPosts
Array3 is filteredPosts = Array1 - Array 2.
the delete function working fine and populating deletedPosts but somehow I can not get any thing in filteredPosts array. Please help me to solve this Mystery.

I am using provider. The constructor of my news.ts file look like this

Blockquote //CONSTRUCTOR
constructor(public navCtrl: NavController, public navParams: NavParams, public api: WpapiProvider,public loadingCtrl: LoadingController) {
this.api.getPosts();
this.presentLoading();
this.filteredPost = api.posts.filter(function(item){
return this.filteredPost.indexOf(item.id) == -1;
});
console.log(this.filteredPost);
}

Blockquote//To Refresh by pulling down
doRefresh(refresher){
this.api.getPosts();
this.filteredPost = this.api.posts.filter(function(item){
return this.filteredPost.indexOf(item.id) == -1;
});
setTimeout(() => {
refresher.complete();
}, 2000);
}

14

You pretty much never want to write “function” in an Ionic app, instead you want to utilize fat arrows () =>.

So replace your filter code with:

this.filteredPost = api.posts.filter((item) => {
return this.filteredPost.indexOf(item.id) == -1;
});
15

thanks working perfectly :smiley:

16

Thanks you it’s work fine

17

Hi its working but one by one i cant delete using icon,
Now,
if i swipe the first list and i click the delete button means its deleted.but next list i want to delete if i swipe its not swiping .so can you tell whats the problem

18

the same as you, i’m searching

19

God bless you bro. You save me a lot of time.