How to implement .each() function into piece of code?

May 30, 2022

I’m still trying to learn the basics of JS.

Basically i just want to remove the first word from a given class. Like this:

Before:

<span class="remove-word">on the beach</span>

After:

<span class="remove-word">the beach</span>

I managed to do it by creating this piece of code:

jQuery(document).ready(
function(){
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('on',''));
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('at',''));
});

Problem now is that this works fine if i only have one instance of the ".remove-word" class present on a page, but as i have many i need to wrap the code in a .each() function otherwise this happens:

jQuery(document).ready(
function(){
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('on',''));
jQuery('.remove-word').text(jQuery('.remove-word').text().replace('at',''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div><span class="remove-word">on the beach</span></div>

<div><span class="remove-word">at the roof</span></div>

<div><span class="remove-word">on the hill</span></div>

How do i implement the .each() function here?

Alternatively i think a script which just removes the first word without looking for either "on" or "at" would be ideal, but i tried and it’s out of reach for me with my limited js knowledge as things stand, which is why i did it using the .replace() way instead.

Thanks.

>Solution :

what about this?

jQuery('.remove-word').each(function( index ) {
    //get the index of the first space to the end of the string
    var firstWord = $(this).text().substring($(this).text().indexOf(' '), $(this).text().length);
    //set the value
    $(this).text(firstWord );  
});

You will want to do some error handling for .remove-word where there is no text at all or no spaces but this should be a good starting point