how to hide redundant element in

Question

I have the following list:

<ul>
  <li>
    <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
  </li>
  <li>
    <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
  </li>
  <li>
    <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
  </li>
</ul>

As you can see I have two <li> with the same name "Linköping".

Is there any way to make it so it only displays unique values?

Why can't you just remove it? – Andy Holmes Dec 10 '15 at 15:46 — Andy Holmes, Dec 10 '15 at 15:46

score 3 · Accepted Answer · edited May 23 '17 at 12:23

Just remove it from the source code. So you will have:

<ul>
    <li>
        <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
    </li>
    <li>
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
</ul>

You could also use the keyword hidden

<ul>
    <li>
        <input name="tablefilter" type="checkbox" value="Finspång" id="tablefilter1" checked="">Finspång
    </li>
    <li>
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
    <li hidden >
        <input name="tablefilter" type="checkbox" value="Linköping" id="tablefilter1" checked="">Linköping
    </li>
</ul>

To show unique values without adding anything to your html code you could make use of jquery.

https://jsfiddle.net/8sm6j9kk/

See this post for explanation JQuery: Remove duplicate elements?

Explanation:

seen is an object which maps any previously seen text to true. It functions as a set containing all previously seen texts. The line if (seen[txt]) checks to see if the text is in the set. If so, we've seen this text before, so we remove the link. Otherwise, this is a link text we see for the first time. We add it to the set so that any further links with the same text will be removed.

An alternative way to represent a set is to use an array containing all values. However, this would make it much slower since to see if a value is in the array we'd need to scan the entire array each time. Looking up a key in an object using seen[txt] is very fast in comparison.

I can't use this solution because the list is is using Razor to render the values — John, Dec 10 '15 at 15:53

how to hide redundant element in

1 Answers1