javascript - Disable all links in nested HTML

Question

I have this snippet in my html code

<nav>        
    <ul class="test-list test-list-level-1">            
        <li class="test-page-1 test-heading-level-2">                
            <a class="test-link test-heading-1" href="#L1" title="t1">T1</a>            
        </li>            
        <li class="test-page-1 test-heading-level-2">                
            <a class="test-link test-heading-2" href="#L2" title="t2">T2</a>                
            <ul class="test-list-level-3">                    
                <li class="test-heading-level-3">                        
                    <a class="test-link test-heading-3" href="#L3" title="t3">T3</a>                    
                </li>                
            </ul>            
        </li>             
    </ul>    
</nav>

My goal is to set every href to "" to disable the link.

I tried

<script type='text/javascript'>
$("a.test-link").removeAttr('href');
</script>

But nothing happened.

I set it to the footer and header.

EDIT: I solved it by surrounding it with

jQuery(function($){
                $("a.test-link").removeAttr('href');
            });

question from:https://stackoverflow.com/questions/65855630/disable-all-links-in-nested-html

Answer 1

Did you try like this:

$("a.test-link").removeAttribute("href")