CODEWITHSUNDEEP
javascriptjquerycss
Liam
Liam

Reputation: 9855

Remove string from input on click? jQuery

I'm trying to write my own function to wrap each string separated by a comma in a tag, I have this working, but on the 'close' click id like to remove the corresponding string from the input, is this possible at all?

jQuery

$('body').on('click', '.tag span', function(){ 
    $(this).parent().hide();
});
$('input').keyup(function(e) {
        $('.result').html('');
        var valueArr = $(this).val().split(',');
        for(var i=0; i<valueArr.length; i++){$('.result').append('<div class="tag">'+valueArr[i]+'<span> X</span></div>')};
});

http://jsfiddle.net/Liamatvenn/7huQ4/1/

Upvotes: 2

Views: 1344

Answers (4)

way2vin
way2vin

Reputation: 2551

You can input data on close button click. jquery text() method to get text inside tag. remove that text from input data. then remove leading and trailing commas with regular expression.

Try this one.

    $('input').keyup(function(e) {
                var input = $(this); /* Store input object for replaced value insertion */
                $('.result').html('');
                var valueArr = $(this).val().split(',');

                for (var i = 0; i < valueArr.length; i++) {
                    $('.result').append('<div class="tag">' + valueArr[i] + '<span> X</span></div>');
                }
                $('span').click(function() {
                    /* Removal of unwanted string like ' X' (close button) */
                    var data = $(this).parent().text();
                    data = data.replace($(this).text(), ""); /* Basic javascript replace() function*/
                    /* Delete unwanted commas, Store modified string to input field */
                    input.val(input.val().replace(data, '')
                                         .replace(/^[,\s]+|[,\s]+$/g, '')
                                         .replace(/,[,\s]*,/g, ','));
                });
            });

demo : http://jsfiddle.net/7uqEg/

Upvotes: 0

PSL
PSL

Reputation: 123739

Try this:

$('body').on('click', '.tag span', function(){ 
    $(this).parent().hide();
    $(this).closest('.result').prev('input').val(""); //get the input respective to the clicked close button.
});

.closest() will get you to the parent .result and target only its previous input which generated the tag using .prev().

Demo

Much simpler, use index of the clicked tag item and remove that respective item from the array based on the same index as they are inserted in that order itself.

$('body').on('click', '.tag span', function () {
    var $parent = $(this).closest('.tag');
    var index = $parent.index(); //Get the index of the `tag`

    $(this).closest('.result').prev('input').val(function (_, value) { //use val function argument
        var values = value.split(','); //split the value
        values.splice(index, 1); //remove the item from array
        return values.join(','); //join them back
    });

    $parent.remove(); //then remove your tag
});

Demo

Upvotes: 3

Justin Niessner
Justin Niessner

Reputation: 245439

You could always modify your click handler to do something like:

$('body').on('click', '.tag span', function(){
    var $this, $input, val, arr;
    $this = $(this);
    $input = $('input');
    arr = $input.val().split(',');
    val = $this.parent().text().replace(' X','');
    arr.splice(arr.indexOf(val), 1);
    $input.val(arr.join(',')); 
    $this.parent().hide();
});

You can see it working at http://jsfiddle.net/eF5ev/

Upvotes: 2

Blender
Blender

Reputation: 298326

You can just store your elements in an array and remove the ones that get clicked by their index:

var $tag = $('<div class="tag"><span class="text"></span><span class="close">&times;</span></div>');
var tags = [];

$('.result').on('click', '.tag .close', function() {
    var $parent = $(this).parent();

    tags.splice($parent.index(), 1);
    $parent.remove();

    $('input').val(tags.join(', '));
});

$('input').keyup(function() {
    tags = []
    $('.result').empty();

    $(this.value.split(/\s*,\s*/)).each(function(index, value) {
        var tag = $tag.clone();

        tag.find('.text').text(value);
        tag.appendTo('.result');

        tags.push(value);
    });
});

Demo: http://jsfiddle.net/7huQ4/9/

Upvotes: 0

Related Questions