Question

0

93

Views

Unable to target and remove appended element in jquery or Javascript

Here's what I'm trying to do here -

Take input from a form field and append the data in a div option-badges
The badges have X button that I'm using to remove the items clicked if needed

What's the problem? With the code I've written, I'm unable to remove the said appended badge while I'm easily able to remove the badges which were there already.

Here's the code. Please help me with this. Thanking in anticipation.

$(document).ready(function() {
  //take input data from first input field and display comma separated in second field
  let dataList = [];
  let dataString = "";
  $("#addData").on('click', function() {
    let data = $("#firstInput").val();
    let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
      data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
    $('.option-badges').append(dataBadge);
    $("#firstInput").val('');
  })

  //remove badge on clicking x
  $(".option-badges > span > i").on("click", function() {
    $(this).parent().remove();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css"  />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  />
<div class="option-badges">
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
</div>

-

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T06:38:41.219Z

Try with on off click like

$(document).off('click', '.option-badges > span > i');
   $(document).on('click', '.option-badges > span > i', function () {
   $(this).parent().remove();
})

$(document).ready(function() {
  //take input data from first input field and display comma separated in second field
  let dataList = [];
  let dataString = "";
  $("#addData").on('click', function() {
    let data = $("#firstInput").val();
    let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
      data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
    $('.option-badges').append(dataBadge);
    $("#firstInput").val('');
  })

  //remove badge on clicking x
  
    $(document).off('click', '.option-badges > span > i');
    $(document).on('click', '.option-badges > span > i', function () {
        $(this).parent().remove();
    })
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css"  />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  />
<div class="option-badges">
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
</div>
<input id="firstInput" type text />
<a id="addData">ADD </a>

0

93

Unable to target and remove appended element in jquery or Javascript

1 answers

0

Find remote jobs

Andres GPT