Question

Is there an way to delete everything after a particular div with javascript/jquery and replace with new code?

The DIV’s are generated dynamically and I want to be able to delete everything after
the last div which looks something like:

            <div class="galImage"> **div content** </div>
            /**delete everything after this point and replace with code below**/
        </div>
    </body>
</html>

I’ve tried $('.galImage').nextAll().remove(); which I found else where on stackoverflow but it doesn’t seem to have any effect – is nextAll() even a legitimate function?

Answer 1

Your question is a little unclear because you’ve posted what appears to be a fragment of markup.

From what I can tell, you want to remove a textNode. Selectors and most jQuery traversal methods can’t find text nodes, but you can select it using the native API.

var galimg = $('.galImage')[0];  // <-- get the DOM element

    // traverse to its parent, and remove the node that is after the galImage
galimg.parentNode.removeChild( galimg.nextSibling );

---

If there are additional nodes to remove, then you can use a loop:

var galimg = $('.galImage')[0];
var node;

while( node = galimg.nextSibling ) {
    node.parentNode.removeChild( node );
}

---

Considering that you’re using jQuery, if there are indeed actual elements (not just text nodes) to remove, you should use .remove(), otherwise jQuery’s cache won’t be updated, which could cause a memory leak.

var galimg = $('.galImage')[0];
var node;

while( node = galimg.nextSibling ) {
    $(node).remove();
}

---

Or if you want a full jQuery solution, you could do this:

var galimg = $('.galImage');
var nodes = galimg.parent().contents(); // <-- .contents() includes text nodes
var idx = nodes.index( galimg );   // <-- get the index of galImage

nodes.slice( idx + 1 ).remove();  // <-- take a slice of the nodes, starting at
                                  //       the index after the galImage