Remove with specific color from DOM fragment

Question

Here is the DOM fragment

which I am getting using :

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.cloneContents();
console.log(selectionContents) // <-- it displays DOM fragment from selection.

I want to remove the <font color="#0000ff"> Smith</font>.

How can I achieve this ?

Do you want to remove it entirely, or simply unwrap it (i.e. ` Smith` will be moved out of the `` tag)? — Terry, May 02 '18 at 08:13
Please do not post images, but the actual code, to make it easy to copy. — kabanus, May 02 '18 at 08:15
@Terry : I want to remove the font with `color="#0000ff"` entirely — Samuel, May 02 '18 at 08:18
do you want to only remove the color or remove the whole line — Icewine, May 02 '18 at 08:18
so you want to remove text with that color? like if the word is colored #0000ff then remove word? — Icewine, May 02 '18 at 08:20
Could you describe your use case? Your approach seems like a complicated way to change the color of some text on the page. Maybe there is a simpler way. — pixelistik, May 02 '18 at 08:23
Will you do something with DOMFragment afterward? Don't you want to remove the original node instead of the cloned one? — Kaiido, May 02 '18 at 08:26
@Kaiido: Yes, i'll extract and append the new one. I just created this example to keep it simple. I'll work on that now. — Samuel, May 02 '18 at 08:42

score 1 · Accepted Answer · answered May 02 '18 at 08:21

If you want to remove the <font> element with the specific color attribute of #0000ff, then you can simply search for the element iteratively within the selectionContents node, and then remove the node if it matches your criteria:

var fontEls = selectionContents.querySelectorAll('font');
fontEls.forEach(function(fontEl) {
  if (fontEl.color === '#0000ff')
    fontEl.remove();
});

See proof-of-concept below (and check your console):

document.querySelector('button').addEventListener('click', function() {
  var range = window.getSelection().getRangeAt(0);
  var selectionContents = range.cloneContents();
  
  var fontEls = selectionContents.querySelectorAll('font');
  fontEls.forEach(function(fontEl) {
    if (fontEl.color === '#0000ff')
      fontEl.remove();
  });
  
  console.log(selectionContents);
});

<div>
  There, <b>Samuel<font color="#0000ff">&nbsp;Smith</font><font color="#ff0000">&nbsp;Smith</font><font color="#00ff00">&nbsp;Smith</font></b>
</div>
<button type="button">Get selection</button>

Many thank Terry. Can I ask your opinion abt manipulating the selected DOM. from https://stackoverflow.com/questions/2139616/window-getselection-gives-me-the-selected-text-but-i-want-the-html/#answer-2139792 , I can see that I can extract the selected `DOM` but to append I need to create a new `div` and append. Can I not simply remove the `font` and append the result. I dont want to add new `div` everytime — Samuel, May 02 '18 at 09:30
@Samuel If that's the case, make a `
` in the markup and give it an id, e.g. `
`. Whenever you fetch the `selectionContent`, simply set the `#output` inner HTML to it. Then you don't create a new element every time. — Terry, May 02 '18 at 09:36

Remove with specific color from DOM fragment

1 Answers1