# How to handle removeItem in an EditableList

**URL:** <https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542>\
**Category:** Developing Nodes\
**Created:** [30 May 2020 21:35 UTC](https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542 "2020-05-30T21:35:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [30 May 2020 21:35 UTC](https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542/1 "2020-05-30T21:35:45Z")

</div>

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:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17d82055f39532a9b32583ddfa8ecb3ea10737ff.png)

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](https://nodered.org/docs/api/ui/editableList/#options-removeItem)):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f82ec35171b14fe1748d10f200ba6e8b5a235cf3.png)

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

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [30 May 2020 21:51 UTC](https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542/2 "2020-05-30T21:51:27Z")

</div>

Not directly.

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [30 May 2020 22:17 UTC](https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542/3 "2020-05-30T22:17:23Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 July 2020 22:17 UTC](https://discourse.nodered.org/t/how-to-handle-removeitem-in-an-editablelist/27542/4 "2020-07-29T22:17:24Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.