I have a list like this in a div:

<div id="x">5,2,3,1,4,9,8</div>

How do I simply remove a given element from this list? JQuery or JavaScript may be used.

Please note that the numbers in the list are unique and they are ing in from a database of type int(11), they are not in any sort of order.

Any help appreciated guys...

I have a list like this in a div:

<div id="x">5,2,3,1,4,9,8</div>

How do I simply remove a given element from this list? JQuery or JavaScript may be used.

Please note that the numbers in the list are unique and they are ing in from a database of type int(11), they are not in any sort of order.

Any help appreciated guys...

• javascript
• jquery
• list
• element

5 Answers 5

First, get the text:

var text=$("#x").text();

Then split it:

var items=text.split(',');

If there's no items, you'll have an empty string as the only element of the array. If so, empty the array:

if(items.length==1&&items[0]=="") {
    items=[];
}

Now convert everything to an integer: (note that this step isn't actually required, but if you're doing anything else with items, it's nice to have)

items=items.map(function(str) { return parseInt(str, 10); });

Put the item you want to remove in a variable:

var itemToRemove=3;

Find that in the array:

var index=items.indexOf(itemToRemove);

If it was found, splice it out of the array:

if(index!==-1) {
    items.splice(index, 1);
}

Join the items back together:

text=items.join(',');

Put it back in the element:

$("#x").text(text);

Try this with toRemove equal to 5, 3, or 8 to see that it works for all cases:

var toRemove = 3; // the number you want to remove
$('#x').text($('#x').text().replace(new RegExp(toRemove + ',?'
                                               + '|,?' + toRemove + '$'), ''));

See example →

Using jQuery's grep-method may be an option too:

var toRemove=1; 
$('#x').text( $.grep($('#x').text().split(','),
                     function (a) { return a != toRemove; }).join(','));

To remove multiple items:

var toRemove=[1,8,3]; 
$('#x').text( $.grep($('#x').text().split(','),
                     function (a) { return $.inArray(Number(a),toRemove)<0; })
                       .join(','));

(But I would prefer a RegExp-solution, it should be much faster)

This is a simple solution that just requires jquery.

function removeFromDiv(which)
{
    var data = $("#x").html();
    data_arr = data.split(",");
    for (var i = 0; i < data_arr.length; i++)
    {
        if (data_arr[i] == which)
        {
            data_arr.splice(i, 1);
            data = data_arr.join(",");
        }
    }
    $("#x").html(data);
}

then simply run:

removeFromDiv("4");

Doesn't really need to be much harder than this:

function removeIndexFromX(index) {
  // Build array from ma-delimited content
  var arr = $("#x").text().split(',');

  // Remove index (zero-based)
  arr.splice(index, 1);

  // Replace
  $("#x").text(arr.join(','));
}

function removeNumberFromX(num) {
  var arr = $("#x").text().split(',');
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === num) {
      arr.splice(i, 1);
    }
  }

  $("#x").text(arr.join(','));
}

The benefit of split and join is that you can use those to manage delimiters (e.g. mas) for you.