How i can remove all the content inside a <td> which came after the first <a>

Question

I am working on a 3rd party application, and I have the following markup :-

Now I want to hide the text and link which comes after the "New item" link. Mainly to hide the " or " text and the " edit " link and the " this list " text... so how I can do this using css if possible ? mainly to specify to remove all the content which comes after a link with id = "idHomePageNewItem" , where this content is specified inside the same <td> ?

Answer 1

You can use query selector and for loop by specifying the id and make use of parentElement if you dont want to specify the classname. Hope this one helps

<table>
<tr>
<td class="ms-list-addnew">
<a href="something" id="idHomePageNewItem">Something</a>
or
<a href="nothing">Nothing</a> Nothing
</td>
</tr>
</table>
<script type="text/javascript">
 var element = document.querySelectorAll("#idHomePageNewItem");
 for(var i=0; i<element.length; i++) { 
   element[i].parentElement.innerHTML = element[i].outerHTML
 }
</script>

Answer 2

You can use jquery for this.

 $(".ms-list-addnew a:not(:first)").hide();

 $(".ms-list-addnew").contents().filter(function () {
     return (this.nodeType == 3);
  }).remove();