如何为R Shiny动态创建的按钮绑定删除事件并获取其ID？

问题背景 #

正在构建一个R Shiny应用，支持动态添加UI组件：每个组件对应widget[数字]的ID，搭配专属删除按钮delete[数字]。尝试监听删除按钮点击以移除对应组件时，无法获取触发事件的按钮ID，运行时报错：Warning: Error in is.factor: object 'name' not found，需要实现无上限数量的组件删除功能。

错误原因 #

1. 原代码中observeEvent的触发源用lapply生成输入列表，事件处理函数里的name变量属于lapply内部局部变量，外部作用域无法访问，直接导致报错。
2. 静态observeEvent无法自动感知后续新增的按钮，必须在组件创建时为每个按钮单独绑定监听逻辑。
3. removeUI的选择器格式错误（缺少CSS ID选择器的#符号），且未调用gridstack的API删除组件，会导致布局混乱。

解决方案 #

每次动态添加组件时，为对应的删除按钮创建独立的observeEvent，直接获取当前组件的数字ID，同时结合gridstack的JS API移除组件，确保布局正常：

• 在点击first_widget添加组件后，立即为当前的delete[数字]按钮绑定监听事件。
• 提取按钮ID中的数字，拼接成对应widget的ID，调用gridstack的removeWidget方法删除组件，再用removeUI清理内部元素。
• 使用local()函数固定当前的数字ID值，避免后续变量自增导致的作用域问题。

完整修改代码 #

library(shinydashboard)
library(shiny)
library(shinyjs)
library(shinyjqui)
library(gridstackeR)
library(plotly)

ui <- fluidPage (
  useShinyjs(),
  tags$head(
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.0.1/gridstack-all.min.js", type='module'),
    tags$script(HTML('
      let numFirstWidgets = 0;
      function addFirstWidget() {
        var grid = document.querySelector(\'.grid-stack\').gridstack;
        let ids = "widget" + numFirstWidgets;
        grid.addWidget(`<div class="grid-stack-item"><div class="grid-stack-item-content" id=${ids}></div></div>`, {h:3, w: 2});
        numFirstWidgets += 1;
      }
      
      // 新增gridstack删除组件的函数
      function removeGridWidget(widgetId) {
        var grid = document.querySelector(\'.grid-stack\').gridstack;
        var widget = document.getElementById(widgetId);
        if(widget) {
          grid.removeWidget(widget.closest(\'.grid-stack-item\'));
        }
      }
    '))
  ),
  grid_stack(id="mygrid"),
  actionButton("first_widget", "First Widget"),
  title = "Gridstack Prototype"
)

server <- function(input, output, session) {
  numOfWidgets <- 0
  
  observeEvent(input$first_widget, {
    current_id <- numOfWidgets
    runjs("addFirstWidget();")
    
    insertUI(
      paste0("#widget", current_id),
      where = "afterBegin",
      tagList(
        actionButton(paste0("delete", current_id), "Delete This Panel"),
        plotlyOutput(paste0("plotly", current_id), height="100%")
      )
    )
    
    # 渲染plotly图表
    output[[paste0("plotly", current_id)]] <- renderPlotly({
      plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
    })
    
    # 为当前删除按钮绑定监听事件，用local固定current_id值
    local({
      id <- current_id
      observeEvent(input[[paste0("delete", id)]], {
        # 调用JS函数删除gridstack组件
        runjs(paste0("removeGridWidget('widget", id, "');"))
        # 移除内部UI元素
        removeUI(paste0("#widget", id))
      }, ignoreInit = TRUE)
    })
    
    numOfWidgets <<- numOfWidgets + 1
  })
}

shinyApp(ui = ui, server = server)

关键修改点说明 #

• 新增removeGridWidget JS函数：通过组件ID找到对应的gridstack元素，调用gridstack的removeWidget方法删除，保证布局正常更新。
• 使用local()包裹observeEvent：固定当前的current_id值，避免后续numOfWidgets自增后，所有监听事件都引用最新值的问题。
• 每个删除按钮单独绑定监听：确保点击时能精准获取对应组件的ID，解决原代码中无法获取触发按钮ID的问题。

内容的提问来源于stack exchange，提问作者LinguiniThePasta