# Clear/close model like turbo frame (clear turbo frame without JS)

**URL:** <https://discuss.hotwired.dev/t/clear-close-model-like-turbo-frame-clear-turbo-frame-without-js/1912>\
**Category:** General\
**Created:** [January 8, 2021, 9:45am UTC](https://discuss.hotwired.dev/t/clear-close-model-like-turbo-frame-clear-turbo-frame-without-js/1912 "2021-01-08T09:45:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![adrianthedev](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/adrianthedev/32/1355_2.png) [@adrianthedev](https://discuss.hotwired.dev/u/adrianthedev)\
**Post date:** [January 8, 2021, 9:45am UTC](https://discuss.hotwired.dev/t/clear-close-model-like-turbo-frame-clear-turbo-frame-without-js/1912/1 "2021-01-08T09:45:28Z")

</div>

Hye there,

I can’t seem to find anything baked in to clear out a modal-like frame.

The setup is this. Before the ending `</body>` tag I added a `<%= turbo_frame_tag "actions_show" do %><% end %>` frame tag.  
When I click an action link it loads the frame content from that url and fills it up with that content that contains this modal.

Now, I want to click cancel and get rid of this modal in the “hotwire” way (if that exists).  
I mean, I could add a controller action that queries the page and empties that div, but that doesn’t seem like the way to do it.  
Or I could have the cancel button call a path that returns an empty frame, but that’s just wastefull.

On the modal you might have a few buttons that do various things (submit a form, redirects to a page, reloads the frame, etc.) but there will always be the need to clear the modal.  
So my question is:

**Is there a way of clearing the contents of a frame programatically without custom JS?**

Thank you!

![image](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/d/d15407eb5b2a23cb4f44ffe6be4990517cb3798a.png)

---

<div class="post-metadata">

**Author:** ![adrianthedev](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/adrianthedev/32/1355_2.png) [@adrianthedev](https://discuss.hotwired.dev/u/adrianthedev)\
**Post date:** [January 8, 2021, 10:00am UTC](https://discuss.hotwired.dev/t/clear-close-model-like-turbo-frame-clear-turbo-frame-without-js/1912/2 "2021-01-08T10:00:50Z")

</div>

Until an official direction I’m using a controller to empty it out.

```auto
// modal_controller.js
import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['modal']

  close() {
    this.modalTarget.remove()
  }
}

```

```auto
<!-- _modal.html.erb - pseudo modal markup -->
<div id="modal-container" data-controller="modal" data-modal-target="modal">
  <div class="modal-overlay" data-action="click->modal#close"></div>
  <div class="modal-body">
    <%= yield %>
    <%= link_to 'Cancel', "javascript:void(0);", 'data-action': 'click->modal#close' %>
  </div>
</div>

```