如何从列表项的文本中删除日期

Question

Our registration site provides a review page before people submit their registration. The review panel includes everything they have checked so the list is individual and variable. Each item begins with a date/time that is distracting and needs to be hidden/removed.

I have been successful in removing it for the last item listed but can't get it to look the same for each list item when more than one is selected.

Here is the HTML of a list where three options have been chosen:

<ul style="list-style: none;">
  <li>and the sub events
    <ul>
      <li>6/30/2020 9:00 AM - 10:00 AM : Volunteer at North Campus</li>
      <li>6/30/2020 1:00 PM - 2:00 PM : Volunteer at South Campus</li>
      <li>6/30/2020 4:00 PM - 5:00 PM : Volunteer at West Campus</li>
    </ul>
  </li>
</ul>

The script that removes the date and time for the LAST line is:

$("div[class$=registrationDetails]").find('li').last().each(function() {
    $(this).text( $(this).text().split(':').pop() );
});

How do I make it the same for all lines?

Answer 1

Assuming that the entire list is within the div[class$=registrationDetails] div, the nested <li> elements will cause a problem if you just find <li> (the outer <li> found will strip a bunch of the child elements' text). Once you do that, you won't have to grab ".last()" anymore. You need to specify that you only want the inner <li> elements. So:

Get rid of the .last() and replace the .find('li') with .find('li > ul > li') .

Answer 2

var listItems = $(".registrationDetails li"); listItems.each(function() { $(this).text( $(this).text().split(':').pop() ); });