Search code examples
javascriptpolymerpolymer-1.0paper-elements

How to remove a menu option from a Polymer Paper Menu

I feel like I'm missing something obvious, but have spent most of the day trying to figure this out and failed, so I guess it's time to ask for help.

I've created a short code snippet to highlight the problem.

I'm trying to remove a menu item from a polymer paper-menu. But when I remove it, it gets added back automatically when you select another menu item. What is the correct way of removing menu items?

Thank you!

<html>
  <head>
    <base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="paper-menu/paper-menu.html">
  </head>
<body>
  <paper-menu>
    <paper-item>One</paper-item>
    <paper-item>Two</paper-item>
    <paper-item>Three</paper-item>
    <paper-item>Four</paper-item>
  </paper-menu>
  
  <button onClick="document.querySelector('paper-item').remove();">Remove first menu item</button>
</body>
  </html>

Solution

  • At least with Polymer 1 (which you are using), you generally manipulate DOM via the Polymer object:

    <button onClick=" Polymer.dom(document.querySelector('paper-menu')).removeChild(document.querySelector('paper-item'));">Remove first menu item</button>

    works.