Develop Reference

How to delete "auto-added span" inside <button>?

I have that <a> (Edit diagram + icons) inside <ul><li>...</ul></li>
I want to add clickable and hoverable arrow icon inside that <a>
So i created button with display: contents, some code:
...
<li class="active">
<a href="#"><span class="fa fas fa-edit mr-3"></span> Edit diagram
<button onclick="location.href='/drawdiagram'" class="fas fa-reply mr-3" style="display: contents">
</button>
</a>
</li>
...
And here is my problem. Look at that screen:
Inside my button tag, <span> was added... This span is adding some css, i mean some paddding etc. And the result is on that picture -.-
That green rectangle anoying me. For first it is adding margin from bottom to my <li>. For second and worst, it is adding extra area where i can move my mouse and my arrow will be hovered.
My mouse can be there and the arrow will be hovered all time -.-
That extra <span> is added by jQuery but I don't want to rummage inside library.
So the question is, anyone have idea what i can do it with this? I had an idea to delete "somehow" that span using JavaScript or jQuery but i have no idea how to do it. Or maybe i can "somehow" delete it using css. But remember, I don't want to rummage inside library.

there are many ways to do that.
but very first you have to confirm if you remove this <span> which is inside button, yours icon will not disturbed. for test just remove it with the help of inspect element(hope you knows. how to do it).
if its fine with removing this <span> then with the help of JQuery you can remove it via adding this line.
$(document).ready(function(){
$('#ID_of_button span').remove();
}

How to determine correct path to any element of html, to activate script

I have one problem to solve. I have to send event from Google Tag Manager, to application of my employeer, my script works fine, but I have a problem with describing 'path' to my element.
For example, its my script:
document.getElementByClassName("name_of_class").setAttribute("onclick", "myapp('event.name_of_event')");
Its working fine for example like this:
<div class="btn btn-primary btn-md outline">
<a href="http://exampleshop.com/shop/">
</a>
</div>
I am just copy-paste name of div class to 'name_of_class' of my script, and its adding my 'oneclik' attribute to tag, so event is sending to my application.
But in another example, like this:
<div clas="quick-access">
<p class="welcome-msg">Default welcome msg! </p>
<div class="shop-access">
<ul class="links">
<li class="first">
My Account</li>
</ul>
</div>
pasting of ANY div class, or li/ul class, cannot 'direct' my script to this element (MyAccount URL href in this case).
So my question is, how to determine correct path to any element of html? I was trying methods like:
document.getElementByTagName("a").getAttribute("My Account")
document.querySelectorAll (a[href=" my_URL "])[0]
and there is no dependency, for one element works one method, for another - does not. Is there any 'universal' method, to discribe where in html run my script?
I am not a programmer, it kind of additional task, so thank you for your understanding.

You can use your browser's development tools to find CSS selectors. I use Chrome, I expect that other browsers have something similar.
Open the developer tools in Chrome. From the toolbar select "Elements". At the top left of the developer toolbar is an icon with a small arrow. Klick it, then select the element in the page you need a selector for. This will now be highlighted in the developer panel that shows the source code. Right click, select "copy" from the context menu and "selector" from the submenu.
Instead of doing custom javascript go to your GTM installation, create a new variable of the DOM type, set it to accept a selector and copy the value you have just retrieved to the field for the css selector. E.g.

angular-loading-bar placement and backdrop

I am using this angular-loading-bar to show a spinner when the user has to wait, but I am having big trouble with the placement of it, it's barely visible.
I have these configs on the module
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeBar = false;
cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner"></div>';
}]);
and then I place this, in the html where I want it to show
<div id="loading-bar-container"></div>
This is works, but it's still not very visible, is it possible to make it act like a modal, or popup?
I am using ui.bootstrap and have some modals, so when the user makes a promise inside a modal the spinner is under it (on main body element, where 'loading-bar-container' div is), so in this case it's not visible at all, is it possible to make it 'pop out'?

I would say this problem is about positioning of your div, this is not problem of the angular-loading-bar.
Try to use z-index and make your div always on top (above the modals).
Without more code or fiddle it's hard to say more...
EDIT: Here are some older questions which can help you:
How can I set an element over Twitter's Bootstrap modal?
Exposing element outside modal-backdrop in CSS Bootstrap jquery modal

How to call .hoverIntent on a element generated in javascript

In my .js script I add a div that will hold a slickgrid, then I add other elements inside the grid, all when my js script loads.
var container = $('#container');
container.html('<div id="gridView"></div>');
then I want to add the hoverIntent library functionality to it so that a popover, triggered on hovering over a element, doesn't pop up unless I hold the hover for a little while (slower then instant)
My popover looks like this (it's inside a font awesome tag that's inside a slickgrid cell), so when I hover over this font awesome tag the popover appears. I want to use hoverIntent on it.
<div class="slick-cell l0 r0"><i class="fa fa-plus-circle" id="21657" data-placement="right" data-trigger="hover" onmouseover="tp.manageRollups.showCustomerIdList(21657);"></i> 21657</div>
I'm assuming I have to call something like
$('#gridView').on('hoverIntent', 'i.fa.fa-plus-circle')
but I'm not sure! Any help would be appreciated.

Button onclick replace with DIV

I want to replace button with a DIV in template design of my blog.
The code for button is
<button onClick="menu1.toggle();" class="sideviewtoggle fa fa-bars"></button>
And jquery script I am using for it is
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,
downarrowsrc: 'toggledown.png'
})
})
It opens a siedbar toggle menu on click. I don't want to use <button> tag for this purpose, instead I want to use a <div> tag so that the functions onclick instead of button. I think that it can be done by using a small code of Javascript but as I am new to Javascript so unable to do it myself?
What should I do?
Here is the url to template.
http://testing-prov4.blogspot.com

It sounds like you would like to use a div element to trigger the slideout menu instead of a button element. This can be easily accomplished. Your current code reads:
<button class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></button>
You can replace this with:
<div class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></div>
without changing any functionality. (CSS changes just a bit)