R Shiny-使用jQuery和onclick事件處理程序刪除UI

Question

下面的應用程序包含一個actionButton Add box ，單擊該框時會創建一個框。 每個框都有一個AdminLTE data-widget = "remove"屬性，因此每個框都有一個remove按鈕，該按鈕位於box-header的box-tools div中。

目前，單擊框的“刪除”按鈕僅隱藏該框，而不是將其從DOM中刪除。 我已經嘗試過以下jQuery函數：

$('[data-widget = \"remove\"]').click(function() {
                function removeBox (obj) {
                $(obj).closest('.newbox').remove();

                })

..從我放置在remove button標記中的onclick處理程序中調用（請參閱server.R），但這似乎不起作用。

這是可復制的代碼：

ui.R：

require(shinydashboard)
require(shinyjs)


# HEADER
header <- dashboardHeader()

# SIDEBAR
sidebar <- dashboardSidebar(

  tags$head(
    tags$script("

                $('[data-widget = \"remove\"]').click(function() {
                function removeBox (obj) {
                $(obj).closest('.newbox').remove();

                })


                ")
    ))

# BODY
body <- dashboardBody(shinyjs::useShinyjs(),

                      box(title = "Months", status = "primary", width = 12, solidHeader = T, background = "navy",
                          tags$div(id = 'add'),
                          tags$div(class = "pull-right",
                                   actionButton("addbox", "Add box")
                                   )
                          )
                      )


ui = dashboardPage(header, sidebar, body, shinyFeedback::useShinyFeedback())

server.R

server = function(input, output, session) {


  observeEvent(input$addbox, {
    id = paste0('box', input$addbox)
    insertUI(
      selector = '#add',
      ui = tags$div(class = "newbox",
                    id = id,
                    box(width = 12,
                        solidHeader = T,
                        title = div(h4(class = "box-title", paste("Month", input$addbox),
                                    div(class = "box-tools",
                                        tags$button(class = "btn btn-box-tool",
                                                    onclick = "removeBox(this)",
                                                    `data-widget` = "remove",
                                                    shiny::icon("remove")
                                                    )
                                        )
                                    ),

                                    selectizeInput(id, "Month name:", choices = month.name)

                                    )

                        ) #end tags$div
                    )
      )
    }) #end observeEvent


  } #end server

我要去哪里錯了？ 我想我可能使用了錯誤的選擇器（ '[data-widget = \\"remove\\"]' ），但是我嘗試使用.btn.btn-box-tool無效。 任何幫助將不勝感激。

Answer 1

您添加具有按鈕的onclick屬性的onclick事件處理程序。 因此，您無需添加另一個。 只需使用以下腳本：

  tags$head(
    tags$script("
function removeBox(obj) {
  $(obj).closest('.newbox').remove();
}")
    )
  )

就是這樣。 無需設置data-widget屬性。

您要使用的腳本很奇怪：

$('[data-widget = \"remove\"]').click(function() {
  function removeBox (obj) { ......

結構是

$('[data-widget = \"remove\"]').click(function() {
 ***action to perform when the user clicks***
})

在腳本中，您將一個函數定義為“要執行的動作”，這將不執行任何操作。