JS clears the empty element node in the DOM

Blank nodes in HTML affect overall HTML layout charts

For example:

When making Baidu home page, the blank node between two input will have to be integrated in the search bar just to separate the button and search box there is a good ugly gap

Then we can use JS to clear the blank lattice

Here's the code for the HTML

<formID= "FM"name= "F"Action= "POST" >            <spanclass= "Search_box">                <inputname= "S_r"type= "text"maxlength= "255"class= "S_r"ID= "S_r" >                <spanclass= "Search_box_btn"></span>            </span>            <spanclass= "Search_btn">                <inputtype= "Submit"name= "Search"ID= "Search"class= "S_btn"value= "Baidu a bit">            </span>        </form>

CSS Code

form{position:relative;}. Search_box{Display:Inline-block;width:539px;Height:34px;Border:1px solid #b6b6b6;Border-width:1px;Border-style:Solid;vertical-align:Top;Border-color:#b8b8b8 Transparent #ccc #b8b8b8;position:relative;}. S_r{width:500px;Height:22px;Font:16px Arial;Line-height:22px;margin:6px 0 0 7px;}. Search_box_btn{position:Absolute;width:18px;Height:16px;background:#fff url (.. /image/search_box_btn.png) No-repeat;Top:50%;Margin-top:-8px;cursor:Pointer; Right:11px;}. Search_btn{Display:Inline-block;}. S_btn{width:100px;Height:36px;Color:#fff;Border-bottom:1px solid #2d78f4;background:#3385ff;}

JS clear the node, in order to reuse, you can wrap it into a function:

function cleanwhitespace (Element)       {           for (var i=0; i<element.childnodes.length; i++)           {               var  node = Element.childnodes[i];                if (Node.nodetype = = 3 &&!/\s/. Test (Node.nodevalue))               {                   node.parentNode.removeChild (node);}}       }  

Processing node: Add a Cleanwhitespace after (document.getElementById ("FM")

The problem is solved, hehe.

JS clears the empty element node in the DOM