-2

There are a dozen workarounds for removing the whitespace after an inline-block element when the line break is read as a whitespace character, such as the comment trick and omitting the closing tag, or simply not using a line break. However, what I'm hoping to accomplish right now is a more elegant solution that doesn't require fiddling with the HTML. Rather, I would like to use a Javascript or Jquery function that removes this whitespace automatically. This question's chosen answer appears to have the solution, but that code didn't work. That code is here:

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

And these are some of the other potential solutions I've tried:

$.fn.removeSpace = function(){
    $(this).contents().filter(function() {
        return this.nodeType === 3;
    }).remove();
};

$.fn.removeSpace = function() {
    if (this.nodeType === 3) {
        $(this).contents().find().remove();
    }
};

I've also tried using "", \s, "\s", \n, and "\n" as the parameters for the remove and find functions. Nothing has worked. So then, my question is, why do none of them work, and is there anything that will work?

Edit:

Here's a fiddle: http://jsfiddle.net/uoojsLu0/ This uses blocks of defined size rather than simply text. There are five <li>s, each 20px wide, within a 100px-wide <ul>. If this were working, they should be side by side with no gaps between (effectively blending together) and fit perfectly within that 100px, thus being on a single line. Yet, there is space between them, and that space pushes the last <li> down. Note that both margin and padding are 0. So, why doesn't this code remove the whitespace?

Edit 2:

Okay, I found the exact reason for the discrepancy. That code does work for all children of the element that calls the function, but not for any of those children's children. Since this is an effect I hope to apply to an entire page, it does not solve my problem. Is there any way to make this code affect the children of the children of the element, and those children's children, all the way down?

Edit 3:

For anyone who has this type of question later, there doesn't appear to be any solution. There's something of a workaround, though. Using the first function above, you can do something like this:

$('#container').cleanWhitespace();
$('#container').children().cleanWhitespace();
$('#container').children().children().cleanWhitespace();
$('#container').children().children().children().cleanWhitespace();
$('#container').children().children().children().children().cleanWhitespace();
$('#container').children().children().children().children().children().cleanWhitespace();

And so on until you've gone to the greatest depth used anywhere on the site. Of course, this is neither pretty nor efficient, so the comment trick or something of the sort is probably a better option.

Community
  • 1
  • 1
Turtleman579
  • 25
  • 5

2 Answers2

0

That code works for me.

noted effect when a space exists between inputs:

<input type="text" />
<input type="text" />

Answer (Desired effect):

$('body').cleanWhitespace();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}
  </script>


<input type="text" />
<input type="text" />
ps2goat
  • 8,067
  • 1
  • 35
  • 68
0

You can run a .each on the child elements:

$('body').children().each(function () {
    console.log(this.value); // "this" is the current element in the loop
    $(this).cleanWhitespace();
});
chongo2002
  • 131
  • 1
  • 5
  • 12