Splice item out of ng-repeat array, when that item is clicked

Question

I have an array of items that I'm repeating.

<li ng-repeat="lineItem in lineItems" class="bouncy-slide-left">
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label for="expenses">{{lineItem.labels.name}}Expense:</label>
        <br>
        <select name="expenses" ng-model="expense.name" class="form-control" style="width: 175px;">
            <option value="{{expense.name}}" ng-repeat="expense in expenses">{{expense.name}}</option>
        </select>
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label>Material Cost:</label>
        <br>
        <input type="text" ng-model="expense.cost" class="form-control" name="material" placeholder="5.00">
    </div>
    <div class="form-group col-sm-5 col-lg-2  col-xl-2 pad-right">
        <label>Quantity:</label>
        <br>
        <input type="text" ng-model="expense.quantity" class="form-control" name="quantity" placeholder="5">
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label>Labor Rate:</label>
        <br>
        <input type="text" ng-model="expense.labor" class="form-control" name="labor" placeholder="20.00">
    </div>
    <div class="form-group col-sm-5 col-lg-2 col-xl-2 pad-right">
        <label>Hours:</label>
        <br>
        <input type="text" ng-model="expense.hours" class="form-control" name="hours" placeholder="4">
    </div>
    <div class="form-group col-sm-5 col-lg-3 col-xl-2 pad-right">
        <label>Responsible:</label>
        <br>
        <span>Renter</span>
        <input type="radio" name="radio-1">
        <span>Owner</span>
        <input type="radio" name="radio-1">
    </div>

    <br>
    <div class="col-sm-12 pad-right">
        <span class="pad-right">Owner Total: {{ownerTotal}}</span>
        <span class="pad-right">Renter Total: {{renterTotal}}</span>
    </div>
    <div class="col-sm-12  pad-right">
        <button class="btn btn-primary btn-sm" ng-click="addExpense()"><i class="fa-check"></i>Add New Expense</button>
        <button class="btn btn-primary btn-sm" ng-click="removeExpense($event)"><i class="fa-remove"></i>Remove Expense</button>
    </div>
</li>

I have an array, an add method, and a remove method.

 $scope.lineItems = [
    {expense: 1}
];

//when button is clicked
//add a new blank object to the lineItems array
$scope.addExpense = function() {
    var num = Math.random();
    var item = {expense: num};
    $scope.lineItems.push(item);
};

//when remove button is clicked 
  //remove the specific item that was clicked from the array
$scope.removeExpense = function($event) {    
    var elm = $event.currentTarget.parentElement.parentElement;
    console.log(elm);
    elm.remove();
    //need to splice selected item OUT of the array
    var i = ???
    $scope.lineItems.splice(i, 1);
};

I've tried several things here. Most of the answers I've found just use indexOf, however the items are being dynamically generated by my model. So I don't know how to get an index of something that doesn't exist yet.

I've also tried some jQueryLite. I would love to just use something like : when $this is clicked, remove it from the dom. I can't seem to find the ANGULAR answer for that.

Answer 1

call removeExpense($index) on ng-click like:

<button class="btn btn-primary btn-sm" ng-click="removeExpense($index)"><i class="fa-remove"></i>Remove Expense</button>

and replace remove function with this code:

$scope.removeExpense = function(index) {
   $scope.lineItems.splice(index, 1);
}

Answer 2

Instead of ng-click="removeExpense($event)" simply pass the lineItem, like ng-click="removeExpense(lineItem)". You can then find the lineItem in lineItems by indexOf

$scope.removeExpense = function(lineItem) {
   var index = $scope.lineItems.indexOf(lineItem);
   $scope.lineItems.splice(index, 1);
}