Why is my remove UI function in R shiny not working?

I've reviewed similar posts and haven´t found any that address this specific need. Below is very simple MWE of what I'm trying to do: shown in 2 images, and in runnable code. My "Hide" button (or remove UI) doesn't work. Help!! I'm sure it's a simple solution but I'm new to this.

What I'm trying to do: Click on the "Add" button and a file input prompt appears below. Click "Hide" button and the file input prompt goes away. Click "Add" again (after "Hide") and the file input prompt appears again. If you click "Add" now (and repeatedly), that single file input prompt remains. (Most other posts have the object appearing repeatedly, again and again in a growing column, with every additional click of the button - this isn't what I need). Just one click to make it appear (and clicking "Add" over and over just keeps it there in its original single manifestation), and "Hide" makes it go away. Simple as that.

Images:

enter image description here enter image description here

library(shiny)

ui <- fluidPage(
  h2("Testing showing and hiding of a function in UI ..."),
  br(),
  h3(actionButton("addBtn", "Add")),
  h3(actionButton("hideBtn","Hide")),
  uiOutput("FileInput"),
) # close fluid page

server <- function(input, output, session) {
  
  output$FileInput <- renderUI({
    "txt"
    req(input$addBtn)
    tagList(fileInput("file1", "Choose file",multiple= FALSE, 
                      accept=c("csv",
                               "comma-separated-values",
                               ".csv"), # close c
                      width=250,
                      buttonLabel = "select one file",
                      placeholder = "Add file"
            ), # close file input
    )} # close tag list    
  )} # close render UI

  observeEvent(input$hideBtn, {
    removeUI(
      selector = "div:has(> #txt)") 
  }) # close observe event

shinyApp(ui, server)

Upvotes: 0

Views: 655

Answers (1)

YBS
YBS

Reputation: 21297

Perhaps you can use shinyjs package to get the desired result. Try this

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  h2("Testing showing and hiding of a function in UI ..."),
  br(),
  h3(actionButton("addBtn", "Add")),
  h3(actionButton("hideBtn","Hide")),
  uiOutput("FileInput"),
) # close fluid page

server <- function(input, output, session) {
  
  output$FileInput <- renderUI({
    "txt"
    req(input$addBtn)
    tagList(fileInput("file1", "Choose file",multiple= FALSE, 
                      accept=c("csv",
                               "comma-separated-values",
                               ".csv"), # close c
                      width=250,
                      buttonLabel = "select one file",
                      placeholder = "Add file"
            ) # close file input
    ) # close tag list    
  }) # close render UI
  
  observeEvent(input$addBtn, {
    shinyjs::show("FileInput")
  })
  
  observeEvent(input$hideBtn, {
    shinyjs::hide("FileInput")
    #removeUI(selector = "div:has(> #txt)") 
  }) 

}

shinyApp(ui, server)

If you do not want to use shinyjs package, you can use insertUI and removeUI as shown below.

library(shiny)

ui <- fluidPage(
  h2("Testing showing and hiding of a function in UI ..."),
  br(),
  h3(actionButton("addBtn", "Add")),
  h3(actionButton("hideBtn","Hide")),
  uiOutput("FileInput"),
) # close fluid page

server <- function(input, output, session) {

  output$FileInput <- renderUI({
    req(input$addBtn)
    tagList(tags$div(id = 'placeholder1')
    ) # close tag list
  }) # close render UI

  observeEvent(input$addBtn, {
    if (input$addBtn==0){return(NULL)
    }else {
      insertUI(
        selector = '#placeholder1' ,
        ## wrap element in a div with id for ease of removal
        ui = tags$div(id="fi",
                      div(style="display: inline-block; width: 185px ;" ,
                          fileInput("file1", "Choose file",multiple= FALSE,
                                    accept=c("csv",
                                             "comma-separated-values",
                                             ".csv"), # close c
                                    width=250,
                                    buttonLabel = "select one file",
                                    placeholder = "Add file"
                          ) # close file input
                      ))
      )
    }
  })

  observeEvent(input$hideBtn, {
    if (input$hideBtn==0){return(NULL)
    }else {
      removeUI(selector = "div:has(> #fi)")
    }
  })

}

shinyApp(ui, server)

Upvotes: 1

Related Questions