Delete rows from a List using onDelete in SwiftUI

In this tutorial, we will see how to delete rows from a List using the onDelete() modifier in SwiftUI.

SwiftUI provides us a onDelete() modifier to control how objects should be deleted from a collection. This is almost always used with the List and ForEach loops.

We basically use the List to show the list of rows and the ForEach to create the rows individually. Then we can use the onDelete() modifier to the ForEach so users can delete any rows they no longer want.

Now have a look at the steps below to achieve this task.

Declare a @State property

First of all, I will create a @State property that will allow the view to mutate and update its data.

@State var rows = Array(1...10)

In the above code, I have declared a @State property called rows that holds an array containing integers from 1 to 10.

Create the view

Now, I will create a List of rows inside the NavigationStack to provide a navigation interface. It enables a navigation bar and navigation-related functionality.

NavigationStack {
    List {
        ForEach(rows, id: \.self) { index in
            Text("Row \(index)")
        }
    }
    .navigationBarTitle("10 Rows")
}

In the above code, Inside the NavigationStack I have used the List to display a collection of rows.

Then, I used the ForEach to iterate over the rows array to create rows in the list, the id: \.self to specify that each row is uniquely identified by its own value.

Create a function to perform delete action

Now, I will create a function that will remove rows from a list when a user tries to delete them, using a set of indices called IndexSet.

func deleteRow(at offsets: IndexSet) {
    rows.remove(atOffsets: offsets)
}

The above function will be called when the user attempts to delete a row. This function will remove the rows from the rows array at the specified indexes provided by offsets.

Apply the onDelete() modifier to the ForEach

Now, I will apply the onDelete() modifier to the ForEach loop to specify an action that should be performed when the user attempts to delete an item in a List view. This modifier takes an argument called perform , we can specify the deleteRow function that I created earlier to perform the delete action.

.onDelete(perform: deleteRow)

The above code enables the delete function for the list, and it calls the deleteRow function when the user tries to delete a row.

Now, have a look at the complete code below.

import SwiftUI

struct ContentView: View {
    @State var rows = Array(1...10)

    var body: some View {
        NavigationStack {
            List {
                ForEach(rows, id: \.self) { index in
                    Text("Row \(index)")
                }
                .onDelete(perform: deleteRow)
            }
            .navigationBarTitle("10 Rows")
        }
    }

    func deleteRow(at offsets: IndexSet) {
        rows.remove(atOffsets: offsets)
    }
}

Output:

We can also add an Edit button using the .navigationBarItems() , we can delete items from the list using this Edit button without swiping. But we can also swipe if we want.

Example

.navigationBarItems(trailing: EditButton())

The above code will add an Edit button to the trailing (right) side of the screen. We have to apply this modifier to the List to add the Edit button.

Here is the complete code below

import SwiftUI

struct ContentView: View {
    @State var rows = Array(1...10)

    var body: some View {
        NavigationStack {
            List {
                ForEach(rows, id: \.self) { index in
                    Text("Row \(index)")
                }
                .onDelete(perform: deleteRow)
            }
            .navigationBarTitle("10 Rows")
            
            //To add the Edit button
            .navigationBarItems(trailing: EditButton())
        }
    }

    func deleteRow(at offsets: IndexSet) {
        rows.remove(atOffsets: offsets)
    }
}

Output: