0

So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?

function myFunction() {
  alert("You clicked the button");
  return;
}
html {
    height: 100%;
}
 
body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  background-color: #00ff00;
}

#main-container {
    padding: 16px;
    margin-top: 30px;
}

#navbar {
  /*overflow: hidden;*/
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 9999;
}

#navbar a.active {
  text-decoration: underline;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
    background-color: green;
}

.dropdown {
  float: left;
 /* overflow: hidden; */
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.deleteBtn {
    float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>

<div id="main-container">

  <div id="navbar" class="navbar">
        <a href="home.php" class="home">Home</a>
        
        <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <!-- Dropdown value below, value is for testing purpose -->
      <a href="https://google.com/">Google
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
      <a href="https://youtube.com/">Youtube
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
      <a href="https://amazon.com/">Amazon
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
    </div>
  </div> 
 </div>
    
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    
</div>
</body>
</html>
Carmen1
  • 3
  • 1

2 Answers2

1
  • #navbar should not be inside #main-container!
  • Don't place <button> inside <a> and vice-versa.
  • Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
  • type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
  • Don't use inline on* handlers. JS should be in one place only, and that's your script

Edited CSS and HTML:

function removeListItem(ev) {
  const EL_list = ev.currentTarget.closest("li")
  EL_list.remove();
}

const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }

html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}

#navbar {
  background-color: #333;
  position: sticky;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

#navbar>a {
  display: block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar .home {
  background-color: green;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-list {
  padding: 0;
  margin: 0;
}
.dropdown-list li {
  display: flex;
}

.dropdown-list li a {
  padding: 14px 16px;
  flex: 1;
}

.dropdown-list li:hover a {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#main-container {
  padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

<div id="navbar" class="navbar">
  <a href="home.php" class="home">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <ul class="dropdown-list">
        <li>
          <a href="https://google.com/">Google</a>
          <button class='deleteBtn'>X</button>
        </li>
        <li>
          <a href="https://youtube.com/">Youtube</a>
          <button class='deleteBtn'>X</button>
        </li>
        <li>
          <a href="https://amazon.com/">Amazon</a>
          <button class='deleteBtn'>X</button>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="main-container">
  <h3>Dropdown Menu inside a Navigation Bar</h3>
  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
-2

use preventDefault().

Read More about preventDefault

function myFunction(e) {
  e.preventDefault();
  alert("You clicked the button");
  return;
}
html {
    height: 100%;
}
 
body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  background-color: #00ff00;
}

#main-container {
    padding: 16px;
    margin-top: 30px;
}

#navbar {
  /*overflow: hidden;*/
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 9999;
}

#navbar a.active {
  text-decoration: underline;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
    background-color: green;
}

.dropdown {
  float: left;
 /* overflow: hidden; */
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.deleteBtn {
    float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>

<div id="main-container">

  <div id="navbar" class="navbar">
        <a href="home.php" class="home">Home</a>
        
        <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <!-- Dropdown value below, value is for testing purpose -->
      <a href="https://google.com/">Google
      <button type='deleteBtn' onclick="myFunction(event)">X</button>
      </a>
      <a href="https://youtube.com/">Youtube
      <button type='deleteBtn' onclick="myFunction(event)">X</button>
      </a>
      <a href="https://amazon.com/">Amazon
      <button type='deleteBtn' onclick="myFunction(event)">X</button>
      </a>
    </div>
  </div> 
 </div>
    
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    
</div>
</body>
</html>
Rajen Trivedi
  • 1,225
  • 2
  • 5
  • 10