Jquery, Removing options from a dropdown not working

Question

I've done a lot of research on doing this and nothing I try works. I feel that I must be missing something, but I can't figure it out. I was hopign someone can shed some light on my issue.

I have an XML variable that comes from a DB query. This xml is encoded from a js include file I've been using that pulls the data from the DB file. I can adjust the xml output if needed (if that's the solution). Basically, the query pulls the headers from the DB and parses it into XML so I can use it in a dropdown (and other capacities later). This is what the xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<recordset>
<record><ID>1</ID><Name>Cell
</Name></record><record><ID>2</ID><Name>Column                                         
</Name></record><record><ID>3</ID><Name>Xval                      
</Name></record><record><ID>4</ID><Name>Yval                              
</Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                       
</Name></record><record><ID>6</ID><Name>Lift                              
</Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                    
</Name></record><record><ID>8</ID><Name>10-1997                              
</Name></record><record><ID>9</ID><Name>11-1997                              
</Name></record><record><ID>10</ID><Name>12-1997                              
</Name></record>
</recordset>

There are a lot more entries (255 total) all are more date-like values (stored as text). For my purposes, I want to add these to a dropdown with the following code: (tval is the stored xml data above)

ps_data=tval;
var ps = $('#dropDownDest');
    $('Name', ps_data).each(function () {
        $('<option />', {
            text: $(this).text(),
            value: $(this).attr('ID')
        }).appendTo(ps);

    });

I want to delete the first 7 entries and keep only the dates. I've tried a lot of methods out there but none of them have worked. I think it has something to do with the xml not having a 'value' in it. Here is the code that I used to try to remove the options:

$("#dropDownDest option[value='1']").remove(); 

$("#dropDownDest option[value='Cell']").remove();

$("#dropDownDest)> option:eq(0)").remove();

I also tried variations leaving out the 'value' part and trying 'ID', 'class', 'title', and 'label'.

Any help on this would be appreciated! Thanks!

Answer 1

If you want to remove the first 7 entries then try

$("#dropDownDest option").slice(0, 7).remove();

The value attribute selector may not be working because, the attribute value might contain some additional character or something.

---

Better than that, don't add them in the first place

var xml = '<?xml version="1.0" encoding="utf-8"?> <recordset> <record><ID>1</ID><Name>Cell </Name></record><record><ID>2</ID><Name>Column                                          </Name></record><record><ID>3</ID><Name>Xval                       </Name></record><record><ID>4</ID><Name>Yval                               </Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                        </Name></record><record><ID>6</ID><Name>Lift                               </Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                     </Name></record><record><ID>8</ID><Name>10-1997                               </Name></record><record><ID>9</ID><Name>11-1997                               </Name></record><record><ID>10</ID><Name>12-1997                               </Name></record> </recordset>';
ps_data = $.parseXML(xml);
var ps = $('#dropDownDest');
$('Name', ps_data).slice(7).each(function(i) {
  $('<option />', {
    text: $(this).text(),
    value: $(this).prev('ID').text()
  }).appendTo(ps);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropDownDest"></select>

--- Your value attribute selector is not working because ID is not a attribute of Name it is its previous sibling so

var xml = '<?xml version="1.0" encoding="utf-8"?> <recordset> <record><ID>1</ID><Name>Cell </Name></record><record><ID>2</ID><Name>Column                                          </Name></record><record><ID>3</ID><Name>Xval                       </Name></record><record><ID>4</ID><Name>Yval                               </Name></record><record><ID>5</ID><Name>ColumnID(XXYY)                        </Name></record><record><ID>6</ID><Name>Lift                               </Name></record><record><ID>7</ID><Name>CellIndex(XXYYZZ)                     </Name></record><record><ID>8</ID><Name>10-1997                               </Name></record><record><ID>9</ID><Name>11-1997                               </Name></record><record><ID>10</ID><Name>12-1997                               </Name></record> </recordset>';
ps_data = $.parseXML(xml);
var ps = $('#dropDownDest');
$('Name', ps_data).each(function(i) {
  $('<option />', {
    text: $(this).text(),
    value: $(this).prev('ID').text()
  }).appendTo(ps);
});

$("#dropDownDest option[value='1']").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="dropDownDest"></select>

Answer 2

First, a tip:

Instead of appending to parent object in each iteration, use a documentFragment to hold the new childs and then append to the parent, it will improve the perfomance of the code, and its a good pratice too.

Second, your xml data has a list of 'record' and this 'record' contains 'Name' and 'ID', but you are looping through 'Name', so 'Name' does not contain 'ID'. You have to loop through 'record' and then get both childs: 'Name' and 'ID' text to populate the option, and thats why the selector 'option[value="5"]' doesnt work, because the option itself does not hold any value. You can see it here http://jsfiddle.net/wjkq77gf/1/

ps_data=tval;
var ps = $('#dropDownDest')
, fragment = document.createDocumentFragment();

$('record', ps_data).each(function ( i, obj ) {

    $('<option />', {
            text: $( 'Name', obj ).text(),
            value: $('ID', obj ).text()
     }).appendTo(fragment);
 });

ps.append( fragment );

console.log(ps.find('option[value="5"]').remove());