<p>There are many times when an application may need the ability to remove an item from a list. For example, you might be making a to do list and decide you want to remove a completed task.</p>
<p>The <code><ion-list></code> makes it easy to remove items in a few simple steps.</p>
<hr>
<h3>DIRECTIONS</h3>
<ol>
<li>
<p>Add an icon to the header that will be used to toggle the delete button for all items. Add a button before the <code><h1></code> heading:</p>
<pre><code><span style="background-color:rgba(110, 226, 40, 0.298039)"><button class="button button-icon icon ion-ios-minus-outline" ng-click="showDelete = !showDelete"></button></span>
<h1 class="title">Ionic List Delete</h1>
</code></pre>
<p><em><code>showDelete</code> will be set to <code>true</code> on the initial click of the button, and then set to <code>false</code> on the next click. This will work as a toggle to show/hide the delete buttons.</em></p>
</li>
<li>
<p>Add the <code><ion-delete-button></code> inside the<code><ion-item></code>, so that each item will have the delete button:</p>
<pre><code><ion-item ng-repeat="item in items">
<span style="background-color:rgba(110, 226, 40, 0.298039)"><ion-delete-button class="ion-minus-circled"></ion-delete-button></span>
Item {{ item.id }}
</ion-item>
</code></pre>
<p><em>You can give the <code><ion-delete-button></code> any icon class you'd like.</em></p>
</li>
<li>
<p>Modify the <code><ion-list></code> to add <code>show-delete</code> to tell the list when it should show the delete buttons:</p>
<pre><code><ion-list <span style="background-color:rgba(110, 226, 40, 0.298039)">show-delete="showDelete"</span>>
</code></pre>
<p><em>The delete button for all items will show when clicking on the button in the header.</em></p>
</li>
<li>
<p>Add the <code>ng-click</code> directive to the<code><ion-delete-button></code>, so that clicking on the delete button will call a function called deleteItem:</p>
<pre><code><ion-delete-button class="ion-minus-circled" <span style="background-color:rgba(110, 226, 40, 0.298039)">ng-click="deleteItem(item)"</span>></ion-delete-button>
</code></pre>
</li>
<li>
<p>In app.js, add the deleteItem function inside of theAppCtrl Controller:</p>
<pre><code>.controller('AppCtrl', function($scope) {
<span style="background-color:rgba(110, 226, 40, 0.298039)">$scope.deleteItem = function (item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};</span>
</code></pre>
<p><em>Toggling the delete buttons and clicking on one will now remove the item from the list!</em></p>
</li>
</ol>
