Polymer - How to remove an item from iron-list?

Question

This live snippet builds a web-component which uses iron-list. Each item in the list has a delete button which, on click, removes the item from the list. When an item is removed, all the next items shift up, but the last item displayed stays rather than disapear as it should be.

According to this stackoverflow, simply by firing the event resize on the iron-list should be enough. But in my snippet, this doesn't help. Nether the iron-resize or the notifyResize function from the official iron-list documentation.

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
        <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        
        // ---- any resize call doesn't help a thin ---
		this.$.list.fire('iron-resize');
		this.$.list.fire('resize');
		this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

Answer 1

"It's simple! The css display property of the root element, in the iron-list's template, must not be set. Then just wrap your flexbox in another simple div."

Here's the live snippet solved:

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
         <!--YOU MUST NO CHANGE THE CSS DISPLAY PROPERTY OF THE ROOT ELEMENT OF THE TEMPLATE!-->
        <div>

         <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
         </div>

        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

Answer 2

You may find an "hidden" attribute on the last item. As items are reused by iron-list when scrolling the item does not get removed. This CSS rule should hide it away

#list [hidden] { display: none; }