Remove HTML Tags on Empty Dynamic Content

Design help CMS
1

I’m using the CMS to pull dynamic content into a list of personal links on a team page. (screenshot)
There are 8 list items.
If the link field is empty, I have a filter setup to hide the empty list item. (screenshot)

My question is…

Is there a way to remove the <li> tag altogether? This way, a screen reader will read “1 of 3” instead of “1 of 8”?

Here is my public share link: LINK
([how to access public share link][2])

[2]: Share a read-only link | Webflow University emphasized text

2

For screen reader use, I’d think javascript would be the easiest approach in your situation.
I’d try this custom code in /body

<script>
$(function() {
  $("li:has('>div.w-condition-invisible')").remove();
});
</script>
3

That worked! Thank you @memetican

4

Awesome, just be aware that that code will remove any <li> that contains a conditionally-hidden element as its immediate child. I used the > to restrict it a bit. If that ever becomes an issue, you could add a “hide if empty” class to your CMS bound elements, adjust the jQuery selector so that it will only remove LI’s containing those specifically-tagged elements.

1 Like
5

hi @jbuedel I was in middle so here is another plain JS

HTML

<ul id="list">
      <li>A</li>
      <li>B</li>
      <li></li>
      <li></li>
      <li>E</li>
   </ul>

JS

// get the  element
const list = document.querySelector("#list"); //?

// remove empty list items
list.querySelectorAll("li").forEach((li) => {
  if (li.textContent === "") {
    li.remove();
  }
});
console.log(list); //?

OR

/ get the  elements
const list = Array.from( document.querySelectorAll("#list li")); 

// remove empty list items
list.forEach((item) => {
  if (item.textContent === "") {
    item.remove();
  }
});
3 Likes
6

Heh heh, I knew you would be onto that. I need to get more comfortable with plain JS for client-side scripting, it’s often a better choice overall, but it often feels so unnecessarily verbose for this kind of work.

1 Like
7

Yeh I like to do these simple brain exercises. JS is more explanatory and more code but it is for me clear what I see (sometimes) :joy: JQ is for me another universe and I do not like its syntax anyway. I’m fighting with TS in Svelte and that is true hell for me. :shushing_face: :joy:

1 Like
8

JQ reminds me a bit of XSL or SQL, it’s very centered on the selector expression, which makes sense in my head. Find these things… do these things.

Haven’t used Svelte, I’ve used TS a lot and quite like it for application dev, except enums, OMG what was MS thinking…

9

they have just released TS update including Enums but Theo has a nice video of how it can be solved.