HTML Components remove on button click

🎈 Using Streamlit
1

I have created an HTML Component (A table using HTML Code making use of components.html). I want that to be removed on click of a button.

I found a solution for doing this for a text input using st.empty() in an article by @andfanilo, but not sure how to do it for html components.

Please guide me!

Thanks.

2

Hello @pitanjal

The following does the trick for me, using st.empty as a context manager:

import streamlit as st
import streamlit.components.v1 as components

placeholder = st.empty()

with placeholder:
    components.html(
        """
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
                </button>
            </h5>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Collapsible Group Item #1 content
            </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
                </button>
            </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Collapsible Group Item #2 content
            </div>
            </div>
        </div>
        </div>
        """,
        height=200,
    )

if st.button("Clear me"):
    placeholder.empty()

Does it do the trick for you too? Note that you may need to use state afterwards to preserve the fact that you pressed the button to hide your component.

Happy Streamlitin’ :balloon:
Fanilo

1 Like
3

Hey @andfanilo , thank you so much for helping me.

I am a bit new to Streamlit and Python, could you please help me do the following with a sample code.

Yes, when I am clicking another button this reappears, if you could help me with it.

Thank You so much!

4

OOPS sorry don’t mind the streamlit_drawable_canvas part :confused:

In Streamlit, anytime you interact with your app, the script is being rerun from top to bottom, so Python variables you wanted to keep between multiple runs are being lost.
Recently the team has added a native session_state variable which keeps all of its objects between reruns, so this is where we can store a boolean variable for example defining whether you have clicked on the button once, for the full lifecycle of the app.
Then we can link the button to a callback which, on any click will permanently modify this variable.

You can get some additional info here: Session State API — Streamlit 0.85.0 documentation

Here is a gist of code to get you started:

import streamlit as st
import streamlit.components.v1 as components

# Initialization
if "component_cleared" not in st.session_state:
    st.session_state["component_cleared"] = False

if not st.session_state["component_cleared"]: # only show if the state is False, hence the button has never been clicked
    components.html(
        """
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <div id="accordion">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
                </button>
            </h5>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Collapsible Group Item #1 content
            </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
                </button>
            </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Collapsible Group Item #2 content
            </div>
            </div>
        </div>
        </div>
        """,
        height=200,
    )


def button_click_callback():
    st.session_state["component_cleared"] = True

st.button("Clear me", on_click=button_click_callback)  # define what happens when you click the button

st.markdown(
    f"Current state of `component_cleared` is {st.session_state['component_cleared']}"
)
4 Likes