get rid of some specific text in a div element using javascript or jQuery

Question

I am trying to keep some elements from showing up. I have pretty much no javascript or jQuery experience and it doesn't seem that CSS will do this.

 <div class="wrap"> <h3 class="event-form-name">Event Name</h3> <div class="inside event-form-name"> <input type="text" name="event_name" id="event-name" value="" /><i>*</i> <br /> The event name. Example: Birthday party </div> <h3 class="event-form-when">When</h3> <div class="inside event-form-when"> <div class="event-form-when" id="em-form-when"> <p class="em-date-range"> From <input class="em-date-start em-date-input-loc" type="text" /> <input class="em-date-input" type="hidden" name="event_start_date" value="" /> to <input class="em-date-end em-date-input-loc" type="text" /> <input class="em-date-input" type="hidden" name="event_end_date" value="" /> </p> <p class="em-time-range"> <span class="em-event-text">Event starts at</span> <input id="start-time" class="em-time-input em-time-start" type="text" size="8" maxlength="8" name="event_start_time" value="12:00 AM" /> to <input id="end-time" class="em-time-input em-time-end" type="text" size="8" maxlength="8" name="event_end_time" value="12:00 AM" /> All day <input type="checkbox" class="em-time-all-day" name="event_all_day" id="em-time-all-day" value="1" /> </p> <span id='event-date-explanation'> This event spans every day between the beginning and end date, with start/end times applying to each day. </span> </div> </div> </div> 

I want to get rid of the "to" in the "em-date-range" p element without removing the word "to" anywhere else on the page (so far I have only found ways to replace it all over the page). And, I would like to remove the "All day" from the "em-time-range" p element.

In case you feel like explaining / teaching more, I am currently using CSS "display: none;" to hide the "em-date-end" input element, "em-time-all-day" checkbox, and the "event-date-explanation" span. I would be curious to know how to do this in javascript... but maybe CSS is the place for this.

Again, I have no control over the HTML, it is not mine. I just need to modify it.

Thank you very much for your time and help.

Answer 1

You're finding classes in jQuery using dot notation. So, $(".em-date-range").hide() will hide the entire paragraph.

You can do the same with CSS:

.em-date-range { display: none }

As you already mentioned.

If you have number of elements with the same class, you can select children of a certain element. For example: $(".event-form-when .em-date-range").hide()

You could read more about that in the official documentation: https://api.jquery.com/category/selectors/

Answer 2

<script>
function deleteTo(){
  var inn=document.querySelector('p').innerHTML;
  document.querySelector('p').innerHTML = inn.replace(/to/gi,"");
}
</script>

this is a javascript code, it works just fine. calling the function deleteTo();

Answer 3

so, this code will edit all elements "P" in your html. It will only remove the words "to" inside the paragraph elements. to modify it to delete "All Day" from your

elements. just change the word "to", which is between the parenthesses for "replace" function, it's in the last readable line in the code.

<script>
function deleteTo(){
  var inn=document.querySelectorAll('p');
  for(var i in inn){
  inn[i].innerHTML = inn[i].innerHTML.replace(/to/gi,"");
  }
}
</script>