How to destroy zurb's foundation element from DOM


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.

   /* 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.set('curator.reveal', new Foundation.Reveal(this.$('.reveal')));    
     willDestroyElement() {
     actions: {
// templates/components/zf-reveal.hbs
<a onclick={{action 'openModal'}}>OPEN REVEAL</a>
<div class="reveal" id="modal" data-reveal>
 <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>

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

export default Ember.Service.extend(Ember.Evented, {
 openModal() {