jquery - Shiny 的removeUI选择器意外地删除了父div

Question

我正在开发一个 Shiny 的应用程序。我在同时使用 renderUI 和 removeUI 时遇到问题。如果我在 input$sumcol 中选择“sum”聚合函数，我想生成一个包含整数或数字列 ( input$aggr ) 的 selectInput ui选择输入。这是我的代码:

# elements in ui
selectInput("vars", "data to display:", choices = NULL, multiple = TRUE, selected = NULL),
selectInput("aggr", "aggregation function:", choices = c("count", "sum"), selected = NULL),
uiOutput("sumcolcontrol")

#server

## create/delete #sumcoldiv  based on selection of input$aggr
observeEvent(input$aggr, {

  if(input$aggr == "sum") { 
    # create sumcol select UI
    output$sumcolcontrol <- renderUI({
      # add a div that contains input$sumcol, so it's easy to remove the div by id later
      tags$div(id = "sumcoldiv",selectInput("sumcol", "column to sum:", choices = dt$numcols, width = "50%"))
    })
  } else {
    # delete the div of id "#sumcoldiv"
    removeUI(selector = "div:has(>#sumcoldiv)")
  }
})

但是，上述代码仅在第一次成功运行(第一次选择“sum”时，ui已成功生成，并且我可以通过选择“count”删除ui)。但是，我无法通过为input$aggr选择“sum”来再次生成ui。第二次及以上。检查浏览器中的元素，问题似乎出在 removeUI 上。因为下面的div <div id="sumcolcontrol" class="shiny-html-output shiny-bound-output"></div> removeUI之后就消失了第一次被调用。据说这只会删除 <div id="sumcoldiv"> ，我想知道我的代码有什么问题吗？我不熟悉 jQuery 选择器，我阅读了removeUI 文档，在我看来我的代码是正确的。请帮忙!

Answer 1

The :has() CSS pseudo-class represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument.

语法

:has(selector_list) { style properties }

示例

以下选择器仅匹配包含 id sumcoldiv 子级的元素，并且通过使用 > 表示直接子级:

'div:has(>#sumcoldiv)'

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/:has

所以，在你的代码中

"div:has(>#sumcoldiv)" 

它应该删除包含 id sumcoldiv 元素的 div

如果您需要删除 id sumcoldiv 的 div，您可以使用

'div#sumcoldiv'

I highly recommend to take a look at CSS Selectors you will not find :has selector there but it will make you more familiar with selectors

其他信息 (ID 应该是唯一的，不要对多个元素使用相同的 id)