How can JQuery know if the value inside the input is equal to the value inside the span with which it was created and the duplicate value is deleted

Question

for example

 <div id="tags-here" style="width: 100%;height: 150px;background-color: rgb(173, 199, 196);">
        <input id="make-tags" type="text" class="animated-progress" style="background-color: white;">

    </div>

I've only got as far as this and I'm stumped. I have looked on google but I haven't found anything.

$("#make-tags").on("keyup",function(e){

var key = e.keyCode || e.wich,
inpval = $("#make-tags").val(),
va =  $(".tag-span").val(),


tinpval = $("#make-tags").text(),
tva =  $(".tag-span").text();


if(key === 188 ){  //comma preased
    var value = $(this).val().slice(0, -1);
    $("#tags-here").append("<span class='tag-span'><i class='fas fa-times'></i>" + value +"</span>")
    $(this).val('');   
}

$(".tag-span").each(function(){
            if( inpval === tva){
                console.log("yes")
            }else{
                console.log("nono")
            }
    });

FYI because you're dynamically appending a span, if you need any events on that element you can do it like this: https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery `$('body').on('click', '.tag-span', function() { ... });` — WOUNDEDStevenJones, Nov 29 '21 at 14:52

WOUNDEDStevenJones · Accepted Answer · 2021-11-29T15:10:05.890

The issue is that in your .tag-span loop, you're comparing the current inpval to tva (which is returning a concatenated string of all span text), but you want to compare it to each .tag-span's text instead. So in the loop, you can pass in the index and item, so then you can access values of each item in the loop:

$(".tag-span").each(function(index, item) {
    if (inpval === $(item).text()) {
        ...
    }
});

Then if it matches, you'll want to take an action and then stop iterating with return false;

$("#make-tags").on("keyup", function(e) {

  var key = e.keyCode || e.wich,
    inpval = $("#make-tags").val(),
    va = $(".tag-span").val(),


    tinpval = $("#make-tags").text(),
    tva = $(".tag-span").text();


  if (key === 188) { //comma preased
    var value = $(this).val().slice(0, -1);
    $("#tags-here").append("<span class='tag-span'><i class='fas fa-times'></i>" + value + "</span>")
    $(this).val('');
  }

  $(".tag-span").each(function(index, item) {
    if (inpval === $(item).text()) {
      console.log("yes")
      // do something
      return false;
    } else {
      console.log("nono")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags-here" style="width: 100%;height: 150px;background-color: rgb(173, 199, 196);">
  <input id="make-tags" type="text" class="animated-progress" style="background-color: white;">
</div>

How can JQuery know if the value inside the input is equal to the value inside the span with which it was created and the duplicate value is deleted

1 Answers1