I have a page with 5 selects that all have a class name 'ct'. I need to remove the option with a value of 'X' from each select while running an onclick event. My code is:
$(".ct").each(function() {
$(this).find('X').remove();
});
Where am I going wrong?
This question is related to
javascript
jquery
html-select
For jquery < 1.8 you can use :
$('#selectedId option').slice(index1,index2).remove()
to remove a especific range of the select options.
It works on either option tag or text field:
$("#idname option[value='option1']").remove();
$('.ct option').each(function() {
if ( $(this).val() == 'X' ) {
$(this).remove();
}
});
Or just
$('.ct option[value="X"]').remove();
Main point is that find
takes a selector string, by feeding it x
you are looking for elements named x
.
find()
takes a selector, not a value. This means you need to use it in the same way you would use the regular jQuery function ($('selector')
).
Therefore you need to do something like this:
$(this).find('[value="X"]').remove();
See the jQuery find docs.
if your dropdown is in a table and you do not have id for it then you can use the following jquery:
var select_object = purchasing_table.rows[row_index].cells[cell_index].childNodes[1];
$(select_object).find('option[value='+site_name+']').remove();
When I did just a remove the option remained in the ddl on the view, but was gone in the html (if u inspect the page)
$("#ddlSelectList option[value='2']").remove(); //removes the option with value = 2
$('#ddlSelectList').val('').trigger('chosen:updated'); //refreshes the drop down list
Iterating a list and removing multiple items using a find. Response contains an array of integers. $('#OneSelectList') is a select list.
$.ajax({
url: "Controller/Action",
type: "GET",
success: function (response) {
// Take out excluded years.
$.each(response, function (j, responseYear) {
$('#OneSelectList').find('[value="' + responseYear + '"]').remove();
});
},
error: function (response) {
console.log("Error");
}
});
Source: Stackoverflow.com