How to remove current tr row in table using vuejs

I am using partially VueJS in Laravel.

In blade:

@foreach ($mileagelogv2 as $mileage)
        <tr>
            <td>@if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
                {{json_decode($mileage->data)->driver_name}}
                @else
                --
                @endif
            </td>
            <td>@if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
                {{json_decode($mileage->data)->date}}
                @else
                --
                @endif
            </td>
            <td>{{Carboncarbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
            <td>{{$mileage->createdBy->name}}</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                "                
                @click="updateMileageLogV2({{$mileage->id}}, $event)"
                >
                Complete
            </a>             
        </td>
        </tr> 
        @endforeach

Rendered Output:

<table class="mileagelogv2_panel">
    <thead>
        <tr>

            <th>Driver Name</th>
            <th>Date</th>
            <th>Created At</th>
            <th>Created By</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody class="mileagelogv2_panel">
                        <tr>
            <td>                Testing 2 u
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:45:49</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                ">
                Complete
            </a>             
        </td>
        </tr> 
                <tr>
            <td>                Testing 2
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:45:08</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                ">
                Complete
            </a>             
        </td>
        </tr> 
                <tr>
            <td>                Testing
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:25:28</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit

                ">
                Complete
            </a>             
        </td>
        </tr> 

    </tbody>
</table> 

In js file:

updateMileageLogV2: function updateMileageLogV2(id, event){
        let item_id = id;
        var $this = this;
        $this.remove();
}

My question is:

When I click on Complete button then the corresponding row should delete. But unfortunately it is not working.

Answer

Finally, I have found solution.

I write this line in VueJs method:

event.path[2].remove();

In VueJs Method:

updateMileageLogV2: function updateMileageLogV2(id, event){
        let item_id = id;

        event.path[2].remove();// remove current tr row on click.

}

Explanation: See in screenshot, event.path has array of DOM list.

enter image description here

  • At 0 index a tag
  • At 1 index td tag
  • AT 2 index tr tag

Leave a Reply

Your email address will not be published. Required fields are marked *