Question

我正在使用Shiny应用程序。我有同时使用renderUI和removeUI的问题。我想生成一个包含整数或数字列（input$sumcol）的selectInput ui，如果我选择＆＃34; sum＆＃34; input$aggr selectInput中的聚合函数。这是我的代码：

# 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)")
  }
})

但是，上面的代码只能第一次成功运行（我第一次选择＆＃34; sum＆＃34;，ui生成成功，我可以通过选择＆＃34; count＆＃来删除ui 34）。但是，我不能再通过选择＆＃34; sum＆＃34;来生成ui。 input$aggr第二次及以上。检查浏览器中的元素，似乎问题出在removeUI，因为下面的div 第一次调用<div id="sumcolcontrol" class="shiny-html-output shiny-bound-output"></div>后，removeUI消失了。据说这只会删除<div id="sumcoldiv">，我想知道我的代码在这里出了什么问题？我不熟悉jQuery选择器，我读了removeUI文档，在我看来我的代码是正确的。请帮忙！

Answer 1

：has（）CSS伪类表示一个元素，如果有的话选择器，相对于给定元素的：范围，传递为参数，匹配至少一个元素。：has（）伪类将选择器列表作为参数。

<强>语法

: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'

我强烈建议你看看CSS Selectors你找不到:has选择器，但它会让你更熟悉选择器

其他信息 （ID假设是唯一的，不要对多个元素使用相同的id）

闪亮的removeUI选择器意外删除父div

1 个答案: