How to remove br tags from a paragraph through javascript

Question

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.

Answer 1

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>

Answer 2

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

Answer 3

Can you try this,

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

demo

Answer 4

The poster wanted a JavaScript only answer.

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

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

jsFiddle: http://jsfiddle.net/DPqzP/1/

Answer 5

Warning!

This will remove all the BR tags.

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

Hope this helps :)

Answer 6

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;

Answer 7

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

Answer 8

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

Answer 9

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))
)