Pass the current row for removal when calling beforeDeleteRow event

Author: Eugene Tupikov

CHANGELOG.md

@@ -5,6 +5,8 @@ Yii2 multiple input change log
 --------------------
 
 - Bug #39: TabularInput: now new row does't copy values from  the most recent row
+- Enh #40: Pass the current row for removal when calling `beforeDeleteRow` event
+
 
 1.2.3
 -----

README.md

@@ -311,8 +311,10 @@ jQuery('#multiple-input').on('afterInit', function(){
     console.log('calls on before add row event');
 }).on('afterAddRow', function(e) {
     console.log('calls on after add row event');
-}).on('beforeDeleteRow', function(){
-    console.log('calls on before remove row event');
+}).on('beforeDeleteRow', function(e, row){
+    // row - HTML container of the current row for removal. 
+    // For TableRenderer it is tr.multiple-input-list__item
+    console.log('calls on before remove row event.');
     return confirm('Are you sure you want to delete row?')
 }).on('afterDeleteRow', function(){
     console.log('calls on after remove row event');

src/assets/src/js/jquery.multipleInput.js

@@ -30,8 +30,8 @@
         /**
          * beforeDeleteRow event is triggered before row will be removed.
          * The signature of the event handler should be:
-         *     function (event)
-         * where event is an Event object.
+         *     function (event, row)
+         * where event is an Event object and row is html container of row for removal
          *
          * If the handler returns a boolean false, it will stop removal the row.
          */
@@ -157,18 +157,18 @@
 
         removeInput: function () {
             var $wrapper = $(this).closest('.multiple-input').first(),
-                line = $(this).closest('.multiple-input-list__item');
+                $toDelete = $(this).closest('.multiple-input-list__item');
 
             var event = $.Event(events.beforeDeleteRow);
-            $wrapper.trigger(event);
+            $wrapper.trigger(event, [$toDelete]);
             if (event.result === false) {
                 return;
             }
 
-            line.find('input, select, textarea').each(function () {
+            $toDelete.find('input, select, textarea').each(function () {
                 methods.removeAttribute.apply(this);
             });
-            line.fadeOut(300, function () {
+            $toDelete.fadeOut(300, function () {
                 $(this).remove();
             });