How to remove end tag in jade

Problem

Ok so I have

        #main
            form(action="/raspored", method=post)
                label(for="polaziste") Polaziste 
                input(type="list", id="polaziste")
                datalist#polaziste
                    for pol,i in popis
                        option(value = pol)

and my datalist doesn't show the options right because (I think) in html5 you are not always allowed to have end tags and this code makes

  <option value="-----"></option>

In jade reference it says "Jade also knows which elements are self closing:" but it seems like it doesn't. How do i specify that I do not want to have end tags?

Problem courtesy of: ditoslav

Solution

The problem was the syntax error in my datalist. It should be:

  input(list="dolaziste", name="dolaziste")

and not:

  input(type="list", id="polaziste")

As for the end tag problem, fixing the code above made things allright withoud meddling with end tags any further

Solution courtesy of: ditoslav

Discussion

<option> is only self-closing under specific circumstances, as documented on MDN (although stackoverflow does not allow a link to that page).

The start tag is mandatory. The end tag is optional if this element is immediately followed by another element or an , or if the parent element has no more content.

So probably jade takes the will-always-work approach and closes the option element.

The right thing to do is say "OK, that makes sense" and move on with your life. However, if you feel so inclined, check out the self-closing.js module from jade. You could inject 'option' in there and it would probably behave as you hope.

Discussion courtesy of: Peter Lyons

You can mix some html in your jade; Can you try this, and see if it works as you expect?

#main
  form(action="/raspored", method=post)
    label(for="polaziste") Polaziste
    input(type="list", id="polaziste")
    datalist#polaziste
      for pol,i in popis
        <option value="#{pol}">

Such inline usage of arbitrary html in jade has been documented. Wondering why it's not working for you.

Let's give it another try;

datalist#polaziste
  each pol in popis
    <option value="#{pol}">
Discussion courtesy of: vmx

This recipe can be found in it's original form on Stack Over Flow.