CODEWITHSUNDEEP
jquery
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery remove specific value on textbox by specific id click

I have this value on textbox.

JS to get the product name

$('#imageInputCurrent').val(jsonStr.productImage);

-

<input type="text" id="imageInputCurrent" value="PRD_62533.jpg,PRD_63335.jpg,PRD_48298.jpg,PRD_89675.jpg,PRD_30890.jpg"/>

And Now I have remove button for each product.

enter image description here

So when I try to click one of remove image, it will remove the value to textbox id="productImage.

Example, I click remove button PRD_62533.jpg so it will take out from the textbox.

Here is the JS:

$('.removeImageInput').on('click', function()
{
    var ID = $(this).attr('id');

    $('.subImageListInput'+ID).hide();
});

So my question how to remove the current click remove image product name value from textbox imageInputCurrent ?

Upvotes: 0

Views: 539

Answers (3)

krishnanjk7
krishnanjk7

Reputation: 1

<input type="text" id="imageInputCurrent" value="PRD_62533.jpg,PRD_63335.jpg,PRD_48298.jpg,PRD_89675.jpg,PRD_30890.jpg"/>

<input type="button" class="removeImageInput" value="Remove" data-value="PRD_62533.jpg"/>
<input type="button" class="removeImageInput" value="Remove" data-value="PRD_63335.jpg"/>

<script>
$('.removeImageInput').on('click', function(){

    var image_list = $("#imageInputCurrent").val();
    var remove_image = $(this).attr('data-value');

    var updated_image_list="";
    if(image_list!=null){

        updated_image_list=image_list.replace(remove_image+',','');
        updated_image_list=updated_image_list.replace(','+remove_image,'');
        updated_image_list=updated_image_list.replace(remove_image,'');

        console.log(updated_image_list);
    }
});

Upvotes: 0

Ryuk Lee
Ryuk Lee

Reputation: 744

Try this 

$('.removeImageInput').on('click', function(){
    var ID = $(this).attr('id');
    var a = $('#imageInputCurrent').val().split(',');
    if(a.indexOf(ID) != -1){
        a.splice(a.indexOf(ID), 1);
    }
    $('#imageInputCurrent').val(a.toString());
    $('.subImageListInput'+ID).hide();
});

Edit : Now it works fine even if there are many ID in the textbox.

Upvotes: 2

Hikarunomemory
Hikarunomemory

Reputation: 4305

This should work :

$('.removeImageInput').on('click',function(){
    var pic = "PRD_62533.jpg"; // assume you can get pic's full name

    var value = $('#imageInputCurrent').val();
    var index = value.indexOf(pic);

    // if there is a comma right after pic string in value
    // add a comma after the string that gonna to be replaced
    // or add a comma behind it
    // var replace = value[index+pic.length] == ',' ? pic + ',' : ',' + pic;
    var replace = value[index+pic.length] == ',' ? pic + ',' : value[index-1] == ',' ? ',' + pic : pic;
    value = value.replace(replace, '');
    console.log(value);
    $('#imageInputCurrent').val(value);
})

Edit: Just right after posting, I found that this won't work if there's only one jpg in $('#imageInputCurrent').val()

Ryuk Lee's answer would be a better choice

Edit2: Now it works fine even if there's only one jpg.

Upvotes: 2

Related Questions