How to click item before hide?

Question

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 class="list-group-item d-flex justify-content-between align-items-center">${inpt.value}<a href="#" data-ddl="1" class="bi bi-trash"></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 class="input-group mb-2">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary bi bi-plus" type="button" data-ddl="1"></button>
  </div>
  <input type="text" class="form-control" data-ddl="1" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div class="input-group-append">
    <span class="input-group-text"><i class="bi bi-chevron-down"></i></span>
  </div>
</div>
<ul class="list-group position-absolute" style="display: none" data-ddl="1">
  <li class="list-group-item d-flex justify-content-between align-items-center">An item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A second item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A third item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A fourth item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">And a fifth one <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
</ul>
Some text ...
<hr>
Some text ...

Answer 1

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 class="list-group-item d-flex justify-content-between align-items-center">${inpt.value}<a href="#" data-ddl="1" class="bi bi-trash"></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 class="input-group mb-2">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary bi bi-plus" type="button" data-ddl="1"></button>
  </div>
  <input type="text" class="form-control" data-ddl="1" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div class="input-group-append">
    <span class="input-group-text"><i class="bi bi-chevron-down"></i></span>
  </div>
</div>
<ul class="list-group position-absolute" style="display: none" data-ddl="1">
  <li class="list-group-item d-flex justify-content-between align-items-center">An item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A second item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A third item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">A fourth item <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
  <li class="list-group-item d-flex justify-content-between align-items-center">And a fifth one <a href="#" data-ddl="1" data-ddl="1" class="bi bi-trash"></a></li>
</ul>
Some text ...
<hr>
Some text ...