How to handle removeItem in an EditableList

[BartButenaers]

Hi folks,

In an editableList, the addItem function is being called e.g. when you click on the Add button. Suppose two items are added, and all the input fields (file1, file2, ...) in the list are populated manually by the user:

When the removeItem is being triggered (by the 'X' button in the list), then I get the original data (which is correct following the documentation):

But then I don't know which of both rows is being removed.
Is there any way to get - inside the removeItem function - a reference to the current row (so I can access the input fields to get the entered data)? That way I could get the filename from the row that is being removed...

Thanks!
Bart

[knolleary]

Not directly.

I usually attach the elements as properties of the data object as a way to keep hold a reference to them.

[BartButenaers]

Hey Nick,
that is indeed a simple and clever workaround.
In case anybody ever needs something similar, here is an example:

var myEditableList= $("#node-input-mycontainer").editableList({
   addItem: function(container, i, data) {
      var row = $('<div/>').appendTo(container);
      
      // Show some html elements in the row, to make the data editable by the user
      var someHtmlElement = $('<i class="fa fa-check"></i>').appendTo(row);
      
      // Store a reference to the html element in the data object
      data.someHtmlElement = someHtmlElement
   },
   removable: true,
   removeItem: function(data) {
      // The html element will be available in the data object
      var someHtmlElement = data.someHtmlElement;

      // Now we can do stuff with the html element (which e.g. might contain recent user input) ...
   }
})

Thanks again!!
Bart