Get inner HTML of parent but ignore a child class

user_11672616 0
Viewed 1266

I need to save the innerHTML of a parent element to a variable while ignoring certain child classes.

I've tried hiding and displaying none (doesn't work). Removing them and then adding them back in to the place that they were may be an option but am unsure of how to achieve that.

Example code, read the innerHTML of the parent div, but ignore any element containing "ignore-me" as a class.

<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

I have a copy button which copies the content of the body to clipboard. I just need to figure out how to ignore/strip the above elements from the copy function without destroying them.

html javascript
3 Answers

This is how you can achieve it.Selects all child except with particular class.

let html=document.querySelectorAll("#parent >:not(.ignore-me)");
//console.log(html) // returns only p tags
html.forEach(ele=>console.log(ele.innerHTML)) // you can get html like this
<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

This is how you can do in jquery (Just a Add on)

let html = $('#parent').children().not('.ignore-me');
//console.log(html);

html.each(function() {
 console.log($(this).html())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <p>read me read me read me</p>
  <div class="ignore-me">and thus ignore this text</div>
  <p>read me read me read me</p>
  <script class="ignore-me"></script>
  <p>read me read me read me</p>
  <link class="ignore-me">
</div>

user_78495490

If I cleary understand you want a copy of parent but without element with class ignore-me:

[edit] added clipborad copy (see: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Using_the_Clipboard_API )

document.querySelector('#Bt-Copy').onclick=_=>
{
  let parentBis = document
                    .getElementById('parent')
                    .cloneNode(true)
  parentBis
    .querySelectorAll('.ignore-me')
    .forEach(element=>{ parentBis.removeChild(element) })

  console.log('copy :=', parentBis.innerHTML)
  add2Clipboard( parentBis.innerHTML ) 
}


function add2Clipboard(newClip) // copy to clipboard
{
  navigator.clipboard
    .writeText(newClip)
    .then(_=>{ console.log('clipboard successfully set ') }
         ,_=>{ console.log('clipboard write failed ')     }
    );
}
.ignore-me { color: red }
<div id="parent">
  <p>read me read me read me</p>
  <div class="ignore-me">and thus ignore this text</div>
  <p>read me read me read me</p>
  <script class="ignore-me"></script>
  <p>read me read me read me</p>
  <link class="ignore-me">
</div>

<button id="Bt-Copy">copy to clipboard (except red part)</button>

user_106690100

Maybe it is too late to answer but I think in Order to preserve the tree structure in case html is required I found following to be the best solution.

const node = document.getElementById("parent");
const clone = node.cloneNode(true);
const elems = clone.querySelectorAll('.ignore-me');
for (const elem of elems) {
  elem.remove();
}
console.log(clone.innerText);
<div id="parent">
 <p>read me read me read me</p>
 <div class="ignore-me">and thus ignore this text</div>
 <p>read me read me read me</p>
 <script class="ignore-me"></script>
 <p>read me read me read me</p>
 <link class="ignore-me">
</div>

user_32982490
Related