in jQuery

Remove an Element from an HTML String with jQuery

While working on a project for work today, I encountered a problem that I apparently have never encountered before. What I thought was a very simple function call in jQuery turned out to be a bit more complicated. I needed to removed an HTML element from a string representation of an HTML snippet. jQuery doesn’t quite behave the way I expected and I had trouble finding a solution

Attempt #1 (Incorrect)

var theString = "<p>A string <span>with a span in it</span></p>";
var theResult = $("span", theString).remove().html();

// Returns: 'with a span in it'

The code above will return the element I want to remove, not the original string with the element removed. Not quite what I want.

Attempt #2 (Incorrect)

var theString = "<p>A string <span>with a span in it</span></p>";
var theResult = $("span", theString).remove().end().html();

// Returns: 'A string'

The code above, at least, gets the reference right, but unfortunatley, jQuery returns the ‘inner’ HTML but what I need is the ‘outer’ HTML. For some reason, it strips the enclosing element and gives me back jut the contents of the element.

Attempt #3 (Incorrect)

var theString = "<p>A string <span>with a span in it</span></p>";
var theResult = $("span", theString).remove().end()[0];

// Returns: (Object) [HTMLParagraphElement]

The code above, gives me back the correct result but as the wrong type. This code returns an HTMLParagraphElement object. I can easily append this return value to another element or the document body, but I started with a string and I want to get a string back.

The Solution

I ended up using a little bit of jQuery slight-of-hand to get the result I want. The second incorrect approach above actually does return what I want, but when I call the jQuery.html() method, it returns the innerHTML.

So my approach is to first append the element to a new (temporary) DIV, then call jQuery.html() on the DIV and so get back the full HTML string I started with, minus the element I removed.

(function($) {
    $.strRemove = function(theTarget, theString) {
        return $("<div/>").append(
            $(theTarget, theString).remove().end()
        ).html();
    };
})(jQuery);

Now I can get exactly the result I expect with the code below.

var theString = "<p>A string <span>with a span in it</span></p>";
var theResult = $.strRemove("span", theString);

// Returns: '<p>A string </p>'

Leave a Reply

  1. Nice code. I wondered, can you use the same method with replaceWith? I explain: I have a string containing multiple images I want to replace with their alt attribute.

    Your method can help, but I have some difficulties adapting it, since I think I must use the each() method…

    •  That’s a really good question about replaceWith. I don’t think you need to do what I’ve done here. The whole problem I was trying to solve was that I couldn’t get jQuery to return the string itself. It wants to return a reference to the element that was removed or to the parent element, which is logical but not what I needed. The replaceWith just swaps one element for another so you’re not really concerned with the contents of each element.

  2. LOL. Crazy! This is always when I ask someone else I find the solution. Here is maybe another solution concerning the problem you described without making a function; it works for me. You helped me a lot too. Thank you. :))

    
    var text = 'some string with &lt;span&gt; span tags &lt;/span&gt; in it';
    
    text = '&lt;div&gt;' +text + '&lt;/div&gt;'; 
    
    text = $(text).find('span').remove().end().html();
    
    
    • Hi Terence. What you’ve done here is essentially what I was doing programatically. That’s what this line does:

      $(“”).append($(theTarget, theString).remove().end()).html();

      You could do it either way. Thanks for your contribution to the discussion. I’m glad you found the article useful.