Is it possible to delete a textNode from the DOM within an element?

Question

I am using a SharePoint blog and for some odd reason, the post to every blog reads,

by [object Object] in HR Department

I am trying to use DOM manipulation to remove this but it's to no avail. The HTML looks something like the below. I want to remove by [object Object] in

<div class="ms-metadata ms-textSmall">
    <span> 
      by [object Object] in <a class="ms-link" id="blgcat" href="https://myPortal.net">IT Department</a>
    </span>
</div>

I tried the following but it didn't work

var link = document.getElementById("blgcat").parentNode.textNode;
console.log(link)
var leafSibling = link.previousSibling
link.removeChild(leafSibling)

Any idea how to fix? Here's the pen .

Answer 1

You were close. Start with just the known element...the link.

Then get the link's previous sibling and remove that from link's parent node.

 var link = document.getElementById("blgcat"); link.parentNode.removeChild(link.previousSibling)

 <div class="ms-metadata ms-textSmall"> <span> by [object Object] in <a class="ms-link" id="blgcat" href="https://myPortal.net">IT Department</a> </span> </div>