selecting element using jquery

Question

I have an object in HTML :

<li id="m_delete" data-group="edit" class="m_delete edit-object disabled" data-control="delete" title="Delete"><a href="#"></a></li>
<li id="m_edit" data-group="edit" class="m_edit edit-object disabled" data-control="drag" title="Edit"><a href="#"></a></li> 

Using next line I am selecting all element in specific class.

$("#toolbar .edit-object").addClass('disabled');

But how can I select just delete element from that class? What is wrong in the next line?

$("#toolbar .m_delete .edit-object").removeClass('disabled');

It is incorrect. How it can be fixed (select just delete object)?

Answer 1

$("#toolbar .m_delete.edit-object").removeClass('disabled');

you should remove the empty space between classnames to make your selector properly work (because you're looking for an element inside #toolbar with both classes)

but of course it's better to address the element with

$("#m_delete")

for the sake of performance (and because that id is unique in the page)

Answer 2

If you want to select elements with both m_delete class and .edit-object class, you can use this selector:

$("#toolbar .m_delete.edit-object").removeClass('disabled');

I have removed the space, as it will select all .m_delete with child element .edit-object.

Answer 3

The problem with your selector is that it selects all items which has a class edit-object and has a parent node with class m_delete which has a parent node with id toolbar .

You can translate it in your mind like this:

#toolbar // .m_delete // .edit-object

As F. Calderan says in his post correctly you can match an item with both edit-object and m_delete class without a space in the selector: .edit_object.m_delete .

This can be translated to:

#toolbar // .m_delete & .edit_object