title: How to remove added items using ID from controller
body: <p>I have tried adding buttons to HBox and FlexBox dynamically</p>
  
  <p>In the XML view i have did as below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;HBox id="upperchart"&gt;
      &lt;m:Input value=" Key Code " editable='false' width='360px'/&gt; 
  &lt;/m:HBox&gt;
  &lt;FlexBox
      alignItems="Start" id="lowerchart"&gt;
  &lt;FlexBox&gt;
  </code></pre>
  
  <p>In the controller I tried accessing these with the ID's as</p>
  
  <p>Controller:</p>
  
  <pre class="lang-js prettyprint-override"><code>var lowerHBox = this.getView().byId("lowerchart");
  var upperHBox = this.getView().byId('upperchart');
  var oHBox = new sap.m.HBox();
  oHBox.addItem(new sap.m.Input({
      value: "Test Data",
      editable: false,
      width: graphWidth*10 + 'px'
  }));
  upperHBox.addItem(oHBox);
  
  var oMyFlexbox = new sap.m.FlexBox();
  // I am adding Buttons to HBox dynamically
  for (var i = 0; i &lt; 5.length; i++){
      oMyFlexbox.addItem(new sap.m.Button({
          text: "Button",
          width: allWidths[i]*10 + 'px'
      }));
  }
  lowerHBox.addItem(oMyFlexbox);
  </code></pre>
  
  <p>Here the thing is When i just navigate through the page it gets created multiple times.</p>
  
  <p>so i have tried to remove on first and add as again under this as:</p>
  
  <pre class="lang-js prettyprint-override"><code>lowerHBox.removeItem();
  upperHBox.removeItem();
  </code></pre>
  
  <p>But this doesn't work to my luck ,</p>
  
  <p>May I know how can I avoid it creating again and again or check if items already exists remove and create a new like this..</p>
  
  <p>Any help or guiding links are appreciated thanks in advance.</p>