Question

jQuery(document).ready(function () { 

  $lstAccountType = $('select[id*="account_type"]');

  $lstAccountType.change(function () {
    $(this).remove('option[text="select one"]')
  });

});

I want to remove the first element in my dropdown list when it is clicked. Does anyone have any pointers in regards to this?

Answer 1

You should just be able to use:

$lstAccountType.change(function () {
    $lstAccountType.find("option[value='"+$lstAccountType.val()+"']").remove();
});

I haven’t tested this, but have a go and let me know if it is any good or not?

EDIT

If you only want to remove the first option each time you could try:

$lstAccountType.change(function () {
    if ($lstAccountType.find("option:first").attr("value") == $lstAccountType.val()) {  
        $lstAccountType.find("option[value='"+$lstAccountType.val()+"']").remove();
    }
});

It needs some tidying up, but hopefully that might help.

EDIT

If you want to remove the first option only once you could do:

var first_option_removed = false;
$lstAccountType.change(function () {
    if (!first_option_removed) {
        if ($lstAccountType.find("option:first").attr("value") == $lstAccountType.val()) {  
            $lstAccountType.find("option[value='"+$lstAccountType.val()+"']").remove();
            first_option_removed = true;
        }
    }
});