yii2-multiple-input I can't get current row

Question

I am working with the yii2-multiple-input, all good when deleting an item iam using the javascript event beforeDeleteRow like below.

jQuery('#wtabularbotellas').on('beforeDeleteRow',function(e, row, currentIndex) {
   // This throw the number of rows instead how do I get the current Index? 
   alert(currentIndex);    
});

But I can't capture the ID number of the row. I tried to do it using the row object and the currentIndex variable, without result since the latter only returns the number of rows and not the index I'm looking for.

Answer 1

The currentIndex you are using is actually the current index the multiple input container is at.

For example if you have 5 inputs and you delete 1 the current index will be 4, it isn't the index of the deleted row, so that means the currentIndex is not the actual index of the row but the total number of rows in the container, and if you are expecting that if you delete the 3rd row out of total 5 rows it should return 3/2 (depending on the starting index from 0 or 1) then you are wrong.

I cant guess what you actually want to accomplish by getting the actual row id of the element/row, although you can do that but before you do you need to understand something.

Consider the following list as the rows and there index inside the container respectively.

| IDX | Element | ID  
| 1   | input   | email-1
| 2   | input   | email-2
| 3   | input   | email-3
| 4   | input   | email-4
| 5   | input   | email-5

if you delete the last row, the new indexes will be same as before which should be logically ok.

| IDX | Element | ID  
| 1   | input   | email-1
| 2   | input   | email-2
| 3   | input   | email-3
| 4   | input   | email-4

but if you remove the first row, and you are expecting that after deleting the first row the rest of the indexes will keep there previous indexing like below,

| IDX | Element | ID  
| 2   | input   | email-2
| 3   | input   | email-3
| 4   | input   | email-4
| 5   | input   | email-5

Nopes, after delete the index will be reset, and if you delete the first element every time, you will always get the index 1.

So if you still want to get the row number of the row that was deleted you should use the row parameter and the .index() function the row parameter will have the object of the row that is about to be deleted.

Note: The following examples are using the basic single column, adjust your script accordingly

$js = <<<JS
    jQuery('#wtabularbotellas').on('beforeDeleteRow',function(e, row,currentIndex) {
       //the index of the row removed 
       let removedIndex= row.index();

       //id of the input inside 
       let inputId = row.find(':input').attr('id');
       console.log("Index removed====>"+removedIndex, "Input id of the removed row input====>"+inputId);
    });
JS;

$this->registerJs($js, \yii\web\View::POS_READY);