remove text before and after an html tag

Question

How would I use jQuery or plain JavaScript to remove the spaces before and after the <nospc/> tag in the code below? (I realize I could simply remove the spaces manually, but sometimes it's convenient to have spaces and line breaks in the HTML that are not rendered.)

<div>
    <img src="" /><nospc/>
    <img src="" />
</div>

In a perfect world <nospc/> would remove all white space before and after the itself, and <nospc> ... </nospc> would remove all white space between the tag pair.

$("nospc").empty() will remove all content inside nospc, but I don't see the open nospc tag in your code above.. — ItayB, Sep 20 '15 at 02:56
http://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery — epascarello, Sep 20 '15 at 02:57
Rather than use a JavaScript approach, I would use the HTML comment approach. More info here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Maximillian Laumeister, Sep 20 '15 at 02:57
@Shadowen, No I just made that tag up figuring that I could access it with jQuery or JavaScript. @ItayB There is no opening tag. `` is both the opening and closing tag. My goal is to remove the space on the web page that will be between the two images. — StormDog, Sep 20 '15 at 03:25

score 0 · Answer 1 · answered Sep 20 '15 at 03:18

Try utilizing .contents() , .each() Node.nextSibling , Node.previousSibling , Node.textContent , String.prototype.replace() with RegExp /\s+/

$("div").contents().each(function(i, el) {
  if (el.nodeName === "#text" && el.nextSibling 
       && el.nextSibling.nodeName === "NOSPC" 
     || el.nodeName === "#text" && el.previousSibling 
       && el.previousSibling.nodeName === "NOSPC" 
     || el.nodeName === "NOSPC") {
         el.textContent = el.textContent.replace(/\s+/g, "")
  }
});

console.log($("div").contents())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
    <img src="" /> <nospc> </nospc> 
    <img src="" />
</div>

remove text before and after an html tag

1 Answers1