I have a dynamic row created, and I want to remove the row but only the data from that row is removed and the input fields are not updated. I am using Livewire in this for creating the row and removing the row.
The UI of the input fields are not removed.
I have tried this but this only removed the data from the row.
This is the button code:
public function removeRow($index){
array_splice($this->createChallanRequest['order_details'], $index, 1);
}
2
Answers
After unset the array we need to update the array again with the new data and update the index number as well.
I assume you are using a loop to display the rows. To let Livewire understand which rows to update in the DOM, you need to provide a unique wire:key attribute for each row:
In this example I have used the record id with a prefix (useful if you have multiple lists on the same page) as wire:key
If you are displaying an array and don’t have a unique id in the rows, you can use the array index, but you must ensure that it doesn’t get recycled (neither when you alter the rows nor when you paginate them):
So when you delete a row you can’t use splice() for this purpose because it compacts the indexes. You can use a simply unset() that deletes the rows but leaves the indexes as they are: