如何删除特定标签innerHTML之前的所有内容

Question

I have a function which generates a bunch of span tags one after another, some are slightly unique with a unique class given to it...I would like to find a function that deletes/clears everything before a certain tag....so this is what the html would look like:

    <div id="wordsBox">
        <span>bla</span>
        <span>bla</span>
        <span class="lastword">bla</span>
        <br />
        <span>bla</span>
        <span>bla</span>
        <span>bla</span>
        <span>bla</span>
    </div>

Basically when it hits the class lastWord when I am cycling through the spans, want to delete the it and the spans before it.

Answer 1

You want to use prevAll()

 $(".lastword") //select the div with the class .prevAll() //select all of the previous siblings .addBack() //adds the "lastword" element into the collection .remove(); //remove the elements 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wordsBox"> <span>bla</span> <span>bla</span> <span class="lastword">bla</span> <br /> <span>bla</span> <span>bla</span> <span>bla</span> <span>bla</span> </div> 

Answer 2

This does what you want:

$( "#wordsBox .lastword" ).prevAll().remove();
$( "#wordsBox .lastword" ).remove();