Shiny: dynamically add/ remove textInput rows based on index

Question

Based on this article I changed my script:

library(shiny)

ui = fluidPage( 
  actionButton("add", "Add new Row", icon=icon("plus", class=NULL, lib="font-awesome")),
  actionButton("remove", "Remove last Row", icon=icon("times", class = NULL, lib = "font-awesome")),
  tags$div(id = 'placeholder')
)

server = function(input, output) {

  ## keep track of elements inserted and not yet removed
  inserted <- c()

  observeEvent(input$add, {
    id <- ''
    insertUI(
      selector = "#placeholder",
      where = "beforeBegin",
      ui =tags$div(
        id = id,
        fluidRow(
          column(2,
                 textInput("alias", label = h5("first"))
          ),
          column(2,
                 textInput("pop", label = h5("second"))
          ),
          column(2,
                 textInput("parent", label = h5("third"))
          ),
          column(2,
                 textInput("dims", label = h5("fifth"))
          ),
          column(2,
                 textInput("method", label = h5("fourth"))
          ),
          column(2,
                 textInput("args", label = h5("sixth"))
          )
        ) 
      )
    )

    inserted <<- c(inserted, id)

  })

  observeEvent(input$remove, {
    removeUI(
      ## pass in appropriate div id
      selector = paste0('#', inserted[length(inserted)])
    )

    inserted <<- inserted[-length(inserted)]
  })

}

shinyApp(ui = ui, server = server)

I looked into this question but am more confused than before.The add button works fine, but the rows do not disappear when hitting the remove button. What am I doing wrong?

Thanks!

Answer 1

Except for the assignment of the id, you were pretty close. Did you forget to set the id? The only assignment i see is: id <- ''. Also you should work with reactiveValues() rather than global variables in shiny.

See the adapted code below:

library(shiny)

ui = fluidPage( 
  actionButton("add", "Add new Row", icon=icon("plus", class=NULL, lib="font-awesome")),
  actionButton("remove", "Remove last Row", icon=icon("times", class = NULL, lib = "font-awesome")),
  tags$div(id = 'placeholder')
)

server = function(input, output) {

  ## keep track of elements inserted and not yet removed
  inserted <- reactiveValues(val = 0)

  observeEvent(input$add, {
    id <- length(inserted$val) + 1
    insertUI(
      selector = "#placeholder",
      where = "beforeBegin",
      ui =tags$div(
        id = id,
        fluidRow(
          column(2,
                 textInput("alias", label = h5("first"))
          ),
          column(2,
                 textInput("pop", label = h5("second"))
          ),
          column(2,
                 textInput("parent", label = h5("third"))
          ),
          column(2,
                 textInput("dims", label = h5("fifth"))
          ),
          column(2,
                 textInput("method", label = h5("fourth"))
          ),
          column(2,
                 textInput("args", label = h5("sixth"))
          )
        ) 
      )
    )
    inserted$val <- c(inserted$val, id)
    print(inserted$val)
  })

  observeEvent(input$remove,{
    print(inserted$val)
    removeUI(
      ## pass in appropriate div id
      selector = paste0('#', inserted$val[length(inserted$val)])
    )

    inserted$val <- inserted$val[-length(inserted$val)]
  })

}

shinyApp(ui = ui, server = server)