dispatch event listener problem after click

Question

My code is working fine...

but I want to remove below those(1) lines of code from my example code(2) (JS Code). If I remove those code then a tag is not working. (a tag do not open link or href is not working).

Is it a good approach to done it by writing those code? ( if any problem will occur for ajax request for this ) ? & Is there any way to work a tag by removing those line of code ? Please help me.

Wanna Remove Those Code(1)

 if (e.target.nextElementSibling == null) {
 if (e.target.getAttribute('target') != null) {
 window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
 } else {
 window.location.href = e.target.getAttribute('href');
 }

Example Code(2)

const lists = document.querySelectorAll('.sidenav nav ul ul')
lists.forEach(function (el) {
 el.className = 'sub-menu';
 el.style.height = 0 + "px";
})
document.querySelectorAll(".sidenav nav ul li a ").forEach(el => el.addEventListener('click', function (e) {
 e.preventDefault();
 e.stopPropagation();
 if (e.target.nextElementSibling == null) {
 if (e.target.getAttribute('target') != null) {
 window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
 } else {
 window.location.href = e.target.getAttribute('href');
 }
 }
 let el = e.target.parentElement.children[1];
 let ul = e.target.parentElement.closest('ul');
 if (ul) {
 ul.querySelectorAll('ul').forEach(function (item) {
 item.style.height = 0 + 'px';
 })
 }
 if (typeof el == 'undefined') return;
 if (parseInt(getComputedStyle(el).height) > 0) {
 el.style.height = 0 + "px";
 } else {
 el.style.height = el.scrollHeight + "px";
 }
 return false;
}));

*,*::after,*::before{
 box-sizing: border-box;
}
html,body{
 margin: 0;
 padding: 0;
}
nav{
 padding: 20px;
 height: 4rem;
 width: 250px;
}
nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-direction: column;
}
nav ul li {
 
 background: tomato;
 width: 100%;
}
nav ul li a{
 display: block;
 padding: 10px;
 text-decoration: none;
 
}
nav ul ul {
 margin-left: 20px;
 height: 0;
 transition: all .2s ease-in ;
}
nav ul ul li {
 width: 100%;
 background: aqua;
}

<aside class="sidenav">
 <nav>
 <ul>
 <li><a href="https://dev.to/">Home</a></li>
 
 <li><a href="">Cat </a>
 <ul>
 <li><a href="https://dev.to/" >Cat 1</a></li>
 <li><a href="https://dev.to/" target="_blank">Cat 1 </a></li>
 </ul>
 </li>
 
 <li><a href="https://dev.to/">about</a></li>
 <li><a href="https://dev.to/">about</a></li>
 <li><a href="https://dev.to/">about</a></li>
 </ul>
 </nav>
 </aside>

Answer 1

e.preventDefault();
e.stopPropagation();
if (e.target.nextElementSibling == null) {
 if (e.target.getAttribute('target') != null) {
 window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
 } else {
 window.location.href = e.target.getAttribute('href');
 }
}

Change that part to:

if (e.target.nextElementSibling == null) {
 return;
}
e.preventDefault();
e.stopPropagation();