Remove html-elements without content

Learn
1

Hi all,

Regularly my view functions have a structure like this:

div 
  [ class "wrapper" ]
  [ div 
      [ class "first" ]
      ( List.map viewListItems list )
  , div 
      [ class "second" ] 
      [ text "Some stuff" ]
  ]

This will render an div.first without child nodes, when list is an empty list.

I would like to avoid these ‘empty’ divs. I could do this like this:

let
  firstDiv = 
    case list of
      [] -> []
      _ -> 
        [ div 
            [ class "first" ]
            ( List.map viewListItems list ) 
        ]
in
  div 
    [ class "content" ]
    ( List.concat 
        [ firstDiv
        , [ div 
              [ class "second" ] 
              [ text "Some stuff" ]
          ]
        ]
    )

However, this method decreases the readability of the function by replacing the logic and the viewListItems function to the let block.

Do you know a nicer way to do this? E.g. could I write a function to filter away html-elements without child nodes?

2

Once a Html value is created, there is no way to introspect it, and therefore no way to filter. Your solution seems reasonable, and you might want to look at Maybe.Extra.values instead of List.concat.

3

Another alternative is:

div 
  [ class "wrapper" ]
  [ if List.isEmpty list then
      text ""

    else
      div 
        [ class "first" ]
        ( List.map viewListItems list )
  , div 
      [ class "second" ] 
      [ text "Some stuff" ]
  ]

You could even define a helper:

{-| Used for rendering nothing. -}
none = Html.text ""
4

Thanks both of you for your reply and suggestions!

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.