How to click item before hide?-CodePudding

I'm trying to build a cool drop down list using bootstrap. However, I'm stuck now on the part of deleting items. the input has focusout event which stop me from using any element even in the list itself.

And here is my code. I need to delete item.

$(document).ready(function(){
  // on focus => show list
  $("input[data-ddl]").focus(function(e){
    let inpt = e.target;
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    $(ul).css("display","block")
  });
  // on focusout => hide list
  $("input[data-ddl]").focusout(function(e){
    let inpt = e.target;
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    $(ul).css("display","none")
  });
  // on click => add to list
  $("button[data-ddl]").click(function(e){
    let btn = e.target;
    let inpt = document.querySelector(`input[data-ddl='${btn.dataset.ddl}']`);
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    if (inpt.value != "")
      $(ul).append(`<li >${inpt.value}<a href="#" data-ddl="1" ></a></li>`);
    
    $(ul).css("display","block");
  });
  // on click => remove from list
  $("a[data-ddl]").click(function(e){
    alert('ok')
    let a = e.target;
    console.log(a)
    a.parent("li").remove();                    
    console.log(a.parent("li"))
  });                 
                                
});

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

body{ padding: 50px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <button  type="button" data-ddl="1"></button>
  </div>
  <input type="text"  data-ddl="1" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div >
    <span ><i ></i></span>
  </div>
</div>
<ul  style="display: none" data-ddl="1">
  <li >An item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A second item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A third item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A fourth item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >And a fifth one <a href="#" data-ddl="1" data-ddl="1" ></a></li>
</ul>
Some text ...
<hr>
Some text ...

CodePudding user response：

Your issue is about tags. The tag use for when we direct to another link. The correct way to do it you should button tag instead of a. That way you can set a func to it

CodePudding user response：

If you look at the console log, you can see it's complaining about a.parent this is because a in this context, e.target is a reference to DOM Element and not DOM Object. you are using JQuery, so just change a to $(a) and you should now have a reference to .parent;

One of the other issues I can see is, the click handler not working for dynamically added elements, I'd suggest looking into .on()

$(document).ready(function(){
  // on focus => show list
  $("input[data-ddl]").focus(function(e){
    let inpt = e.target;
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    $(ul).css("display","block")
  });
  // on focusout => hide list
  $("input[data-ddl]").focusout(function(e){
    let inpt = e.target;
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    $(ul).css("display","none")
  });
  // on click => add to list
  $("button[data-ddl]").click(function(e){
    let btn = e.target;
    let inpt = document.querySelector(`input[data-ddl='${btn.dataset.ddl}']`);
    let ul = document.querySelector(`ul[data-ddl='${inpt.dataset.ddl}']`);
    if (inpt.value != "")
      $(ul).append(`<li >${inpt.value}<a href="#" data-ddl="1" ></a></li>`);
    
    $(ul).css("display","block");
  });
  // on click => remove from list
  $("a[data-ddl]").click(function(e){
    alert('ok')
    let a = e.target;
    console.log(a)
    $(a).parent("li").remove();                    
    console.log($(a).parent("li"))
  });                 
                                
});

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

body{ padding: 200px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <button  type="button" data-ddl="1"></button>
  </div>
  <input type="text"  data-ddl="1" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div >
    <span ><i ></i></span>
  </div>
</div>
<ul  style="display: none" data-ddl="1">
  <li >An item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A second item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A third item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >A fourth item <a href="#" data-ddl="1" data-ddl="1" ></a></li>
  <li >And a fifth one <a href="#" data-ddl="1" data-ddl="1" ></a></li>
</ul>
Some text ...
<hr>
Some text ...