Esto es lo que estoy tratando de hacer aquí:
option-badges divremove the items clicked si es necesario¿Cuál es el problema? Con el código que he escrito, no puedo eliminar dicha insignia adjunta, mientras que puedo eliminar fácilmente las insignias que ya estaban allí.
Aquí está el código. Por favor, ayúdame con esto. Agradeciendo de antemano.
$(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 + '   <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>-
Prueba con on off click como
$(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 + '   <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>