How to Strip a Tag and All of Its Inner HTML Using the Tag'S Id

How to strip a tag and all of its inner html using the tag's id?

With native DOM

$dom = new DOMDocument;
$dom->loadHTML($htmlString);
$xPath = new DOMXPath($dom);
$nodes = $xPath->query('//*[@id="anotherDiv"]');
if($nodes->item(0)) {
$nodes->item(0)->parentNode->removeChild($nodes->item(0));
}
echo $dom->saveHTML();

Remove a HTML tag but keep the innerHtml


$('b').contents().unwrap();

This selects all <b> elements, then uses .contents() to target the text content of the <b>, then .unwrap() to remove its parent <b> element.


For the greatest performance, always go native:

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

while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}

This will be much faster than any jQuery solution provided here.

How to remove HTML tags along with id except allowed tags?

You can parse the string as HTML and use DOM manipulation to remove the elements, here is an example:





let input = `-A3-<tag1>Sale</tag1>-cum-</blockquote><p <tag1>id</tag1>="p_12"> </p><p 

<tag1>id</tag1>="p_13"> Gift <tag1>Deed</tag1> <tag1>executed</tag1> by C.K. Koshy

<tag1>in</tag1> favour <tag1>of</tag1> Quilon Diocese <tag1>and</tag1> C.K.`


input = input.replace(/<tag1>id<\/tag1>/g, "id");


const doc = new DOMParser().parseFromString(input, 'text/html');


doc.querySelectorAll('blockquote, p').forEach((e) => {

[...e.childNodes].forEach(child => {

e.before(child);

});

e.remove();

});


const output = doc.body.innerHTML;

console.log(output);

How to clear tags from a string with JavaScript

Using innerText and textContent:

var element = document.getElementById('mydiv');
var mystr = element.innerText || element.textContent;
  • innerText is supported by all browsers but FF
  • textContent is supported by all browsers but IE

DEMO

I just saw that the string will still contain line breaks. You might want to remove them with replace:

mystr = mystr.replace(/\n/g, "");

Update:

As @Šime Vidas points out in his comment, it seems you have to handle the whites spaces a bit differently to fix the string in IE:

mystr = mystr.replace(/\s+/g, ' ');

Get innerHtml but remove unwanted tags

If you're not using jQuery (or even if you are), this link explores some of the different options (eg innerText vs textContent), along with how they differ between browsers:

http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/

Basically, not all approaches work in all browsers, and some strip line breaks while others don't.

Remove HTML element based on innerHTML

The code document.getElementsByClassName('chart') returns an HTMLCollection not a DOM Element. You'll have to loop over every element in the array i.e.:

var charts = document.getElementsByClassName('chart');
if(charts.length) {
for(var i=0; i<charts.length; i++) {
if(charts[i].tagName === 'TD' && charts[i].innerHTML.includes('Xeon')) {
charts[i].parentNode.style.display = 'none';
}
}
}

also note:

  • it's getElementsByClassName() (elements plural) not getElementByClassName() (singular).
  • it's String.includes() not String.contains()
  • and you probably want to use parentNode to hide the entire row


Related Topics



Leave a reply



Submit