How to destroy zurb's foundation element from DOM

Performance
1

Hi, I am currently doing ember+zurb’s foundation. Due to not supporting fastboot 1.0 ember-cli-foundation-6-sass i am using this addon. Now i want to destroy reveal component. Because component’s reusability i want only one reveal component and want to change it’s content from anywhere through service. If my approach is right,(which i am confused) how do i destroy this component, in my use case this component is not destroying. Here are sample snippets.

   //components/zf-reveal.js
   /* global Foundation */
   import Ember from 'ember';

   export default Ember.Component.extend({
     curator: Ember.inject.service(),
     title: Ember.computed('curator.revealTitle', function() {
       return this.get('curator.revealTitle');
     }),
     didInsertElement() {
       this._super(...arguments);
       this.set('curator.reveal', new Foundation.Reveal(this.$('.reveal')));    
     },
     willDestroyElement() {
       this._super(...arguments);
       this.get('reveal').destroy();
     },
     actions: {
       openModal(){
         this.get('curator').openModal();
       }
     }
   });
// templates/components/zf-reveal.hbs
<a onclick={{action 'openModal'}}>OPEN REVEAL</a>
<div class="reveal" id="modal" data-reveal>
 <h1>{{title}}</h1>
 <p class="lead">Your couch. It is mine.</p>
 <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
 <button class="close-button" data-close aria-label="Close modal" type="button">
   <span aria-hidden="true">&times;</span>
 </button>
</div>

// curator.js service
import Ember from 'ember';

export default Ember.Service.extend(Ember.Evented, {
 openModal() {
   this.get('reveal').open();
 }
})

//application.hbs 
{{zf-reveal}}