How i can remove the “Edit this list” link from my web app toolbar

Question

I am working on a team site, where i have a custom list, and for this custom list i am enabling the Quick Edit option, so on the list views i will get this inside the tool bar:-

now i added this list inside our site home page as a web part, so i got this option also inside the tool bar:-

now i want to hide the following markup "or edit this list" inside the webpart tool bar, and keep the tool bar as is inside the list views. now the problems i faced is that, if i remove the "Quick Edit" option from the list , this will also disable this option inside the list views (which i do not want to do). and if i chose to hide the tool bar from the webpart settings, this will remove the "new item" link. so what i am trying to achieve is how i can hide the following markup only "or edit this list" from the webpart tool bar only ?

now i checked the markup for this toolbar and i find the following:-

so i tried writing this javaScript:-

<script type="text/javascript">
 var k = document.getElementById('idHomePageNewItem');
 document.getElementsByClassName('ms-list-addnew').innerHTML = k.outerHTML;
</script>

But it did not have any effect. also when i checked the markup for the home page i did not find an element with id = idHomePageNewItem although on the Firefox F12 tool i capture this id !!

Answer 1

Try to use below jquery. It should work.

var objNewItem = $("#idHomePageNewItem")
$(objNewItem).parent().replaceWith($("#idHomePageNewItem"))

Answer 2

Please try this, it might help you.

1. Click on Gear icon > Edit page from top right corner of your ribbon
2. Edit the web part's properties
3. For Toolbar Type, select Top Toolbar
4. Click on OK
5. Click on Stop Editing button from ribbon to finish

Please refer below screenshot