How can i remove all <br> tags from a paragraph using javascript(only). This is my HTML code from which i'm trying to remove:

<p>
    Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. Vivamus id orci ac sapien porttitor pulvinar ut et dui. Phasellus porttitor quam dictum magna faucibus sollicitudin ac sit amet lectus.<br>
    <br><br>
    <a href="#"><i class="icon-facebook-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-twitter-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-google-plus-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-phone-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-pinterest-sign" style="color:#; font-size:px; "></i></a>
</p>

I know how to remove it using jquery. But i want to remove it through pure javascript.

How can i remove all <br> tags from a paragraph using javascript(only). This is my HTML code from which i'm trying to remove:

<p>
    Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. Vivamus id orci ac sapien porttitor pulvinar ut et dui. Phasellus porttitor quam dictum magna faucibus sollicitudin ac sit amet lectus.<br>
    <br><br>
    <a href="#"><i class="icon-facebook-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-twitter-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-google-plus-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-phone-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-pinterest-sign" style="color:#; font-size:px; "></i></a>
</p>

I know how to remove it using jquery. But i want to remove it through pure javascript.

• javascript
• html

• 3 yourstr.replace('<br>', ''); – Krish R Commented Jan 9, 2014 at 11:54

9 Answers 9

Only for modern browsers(IE8+ should be fine) - use querySelectorAll

if (document.querySelectorAll) {
    var brs = document.querySelectorAll('p br');
    for (var i = 0; i < brs.length; i++) {
        brs[i].parentNode.removeChild(brs[i]);
    }
}

Demo: Fiddle

Try this for old ones

if (document.querySelectorAll) {
    var brs = document.querySelectorAll('p br');
    for (var i = 0; i < brs.length; i++) {
        brs[i].parentNode.removeChild(brs[i]);
    }
} else {
    var ps = document.getElementsByTagName('p');
    for (var i = 0; i < ps.length; i++) {
        var brs = ps[i].getElementsByTagName('br');
        for (var j = brs.length - 1; j >= 0; j--) {
            brs[j].parentNode.removeChild(brs[j]);
        }
    }
}

Demo: Fiddle

In jQuery

$('p').find('br').remove();

JavaScript

var para=document.getElementById("para").innerHTML;
para = para.replace(/[<]br[^>]*[>]/gi,"");

<p id="para">
    Aenean odio dui, facilisis ut convallis in, congue quis mi. Etiam eu tristique metus. Vivamus id orci ac sapien porttitor pulvinar ut et dui. Phasellus porttitor quam dictum magna faucibus sollicitudin ac sit amet lectus.<br>
    <br><br>
    <a href="#"><i class="icon-facebook-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-twitter-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-google-plus-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-phone-sign" style="color:#; font-size:px; "></i></a><br>
    <a href="#"><i class="icon-pinterest-sign" style="color:#; font-size:px; "></i></a>
</p>

Can you try this,

 var e = document.getElementsByTagName("p")[0];
 e.innerHTML = e.innerHTML.replace('<br>', '');

demo

The poster wanted a JavaScript only answer.

var p = document.getElementsByTagName("p")[0];

p.innerHTML = p.innerHTML.replace(/<br>/g, '');

jsFiddle: http://jsfiddle/DPqzP/1/

Warning!

This will remove all the BR tags.

docDesc = docDesc.replace(/[<]br[^>]*[>]/gi,"");

Hope this helps :)

This is an alternative. Might be slow. but still works:

var test = document.getElementsByTagName('p').innerHTML;
var new_string = test.split('<br>').join('');
document.getElementsByTagName('p').innerHTML = new_string;

As you shouldn't parse HTML with regex, you have to iterate through all the paragraphs, then iterate through all the elements inside the paragraph and check for BR elements, and remove them.

var p = document.getElementsByTagName('p');

for (var i=p.length; i--;) {
    (function it(el){
        if(el){
            if(!el.nodeName || !(/#text/i.test(el.nodeName))){
                if(el.firstChild){
                    it(el.firstChild);
                }
            }

            if(el.nextSibling){
                it(el.nextSibling)
            }
        }
        if (el.tagName && el.tagName.toLowerCase() == 'br') {
            el.parentNode.removeChild(el);
        }
    })(p[i]);
}

FIDDLE

Add id/class to p tag so that you can remove br tag only form that p with class/id

var pContent = document.getElementById("ID").innerHTML;
var replacedContent = pContent.replace(/<br>/g,"");
document.getElementById('ID').innerHTML = replacedContent;

ID is the id of the p

if you use class then you have to get element by tag name, loop thorough it to match the class, then perform this operation.

If you don't want to give id/class you can go with getElementsByTagName

I think you're hoping to avoid fake paragraphs formed because of <br>. The idea should be to break down the paragraph containing <br> into multiple paragraphs.

let ps = document.getElementsByTagName('p')
let newps =
    ps
    |> Array.collect((p,attrs,children)=>
           let groups = splitbyBr(children)
           groups
           |> Array.map(group => p(attrs,group))
)