jQuery: Append element to inputfield and remove?

Question

I'm trying to append and remove element in the inputfield.

I can simply append them and it works fine but I don't know hwy it doesn't get deleted/removed when I needed it to!

To explain this issue I have created this fiddle: http://jsfiddle.net/hrL3gn1g/2/

if you click on the images, it will append the element in the div Slevel as well as the inputfield.

If you click on the elements inside the Div, it should delete/remove the element or string from inside the inputfield but it doesn't

could someone please advise on this issue?

Answer 1

You can try this:

$(document).on('click', '.pricetag',function(){

   var names = $(this).attr('data-name');
   var price = $(this).attr('data-price');

   // Create the value you want to remove
   var html = '<span data-price="'+price+'" data-name="'+names+'" class="pricetag">'+names+'</span>';

   // Replace that value with empty string
   var newValue = $('#Finalized').val().replace(html,'')

   // Insert new value
   $("#Finalized").val(newValue);

});

Answer 2

as i see , you try to remove the words(orange,apple etc) by using $(<input>).remove(<span>) , but you cant do this in that way.instead of this , i remove the selected <span> element.

i changed a little the click listener function to this one:

//when the user click on a word
$(document).on('click', '.pricetag',function(){   
    //this is the <span> element that the user clicked to delete
    $(this).remove();   
});

i changed the jsfiddle : http://jsfiddle.net/tornado1979/hrL3gn1g/3/ hope helps,good luck.