We Keep Coding

Select all elements that don't start with a certain id

Is there a way to get all the elements that don't start with the id foo in JavaScript?
I tried the following:
var elements = document.querySelectorAll('[id!=foo]');
That doesn't work.
Basically I want the opposite of:
var elements = document.querySelectorAll('[id^=foo]');

Use the :not() selector:
document.querySelectorAll(":not([id^='foo'])");

You can use the :not pseudo selector to match everything except [id^="foo"]:
var elements = document.querySelectorAll(':not([id^=foo])');

Just select all and then filter out the one with the id
document.querySelectorAll("*").filter(...)

remove all child nodes with specfic class

i have dynamic ul li nodes that make tree and i want to remove all child span nodes which have
class="highlight" or
class="add_action" or
class="delete_action" or
class="edit_action"
under specfic li with specfic id -(in this example 20 )- i tried this code with jquery to find all span with theses classes to remove it but it didnt worked
$('li#20').find('span.add_action').each(function(){
$(this).remove();
});
also tired
$('li#20').eq(0).find('.add_action').remove();
$('li#20').children('.add_action').remove();
this the full example
https://jsfiddle.net/kqagjtmr/

You have duplicate id attributes in your code, for example:
<li class="thide" id="20"><span class="vertical"></span>
<span id="20" class="first_name" title="">الجد سعد</span>
This is why $('li#20') doesn't work properly. id attributes must be unique, and shouldn't start with a number, either. Use classes instead.
To remove elements, simply use:
$('someSelector').remove();
Also, you should include jQuery in your fiddle, you can find the option here:

Get all the span elements having the specified class and remove all of those. No need of using each to looping. Use the span elements comma-separated to select all the matching elements.
$('li#20')
.find('span.highlight, span.add_action, span.delete_action, span.edit_action')
.remove();
DEMO

See the updated fiddle : "https://jsfiddle.net/kqagjtmr/1/"
Use $('li#20').find("highlight add_action delete_action edit_action").remove();
to find multiple elements at once and remove them.

How can I combine these jQuery statements?

I have a jQuery statement like this;
var current = $(this);
current.hide();
current.siblings('.ab').hide();
current.siblings('.cd').hide();
I want to change this into a single statement and I wrote;
$(current,current.siblings('.ab'),current.siblings('.cd')).hide();
But ab is not hiding. How can I combine the 3 hide() statements into one?

You can use a multiple selector and addBack():
$(this).siblings(".ab, .cd").addBack().hide();
addBack() will add the original element back into the set, so you can get both the element and its relevant siblings in the same jQuery object.

You can use a multiple selector (comma separated) for the siblings function and than use addBack to include the first element.
Add the previous set of elements on the stack to the current set,
optionally filtered by a selector.
Code:
current.siblings(".ab, .cd").addBack().hide();

Try to use .end(),
current.siblings(".ab, .cd").hide().end().hide();
or use .add() like below,
current.add(current.siblings(".ab, .cd")).hide();

try this:
var current = $(this);
current.hide().siblings('.ab').hide().end().siblings('.cd').hide();

You can use comma separated multiple selectors in .siblings()
current.siblings('.cd,.ab').addBack().hide();
Working Demo

jQuery select all classes except one ID

I need to select all divs of a certain class (jqx-slider) excluding one ID (#str_prg) - something like:
$("div.jqx-slider :not(#str_prg)").each(function () {
.....
});
What is the correct syntax for that?
Also, would it be faster and more effecient code, if I add a "if" condition inside the loop - like
if($(this).attr('id') ! = "str_prg"){
}
Thanks!

You are using an descendant selector between the class selector and the not selector, which is invalid for your requirement
$("div.jqx-slider:not(#str_prg)")
when you say $("div.jqx-slider :not(#str_prg)") it selects all descendants of elements with class jq-slider except the one with id str_prg

Try to remove an unnecessary space char like this:
$("div.jqx-slider:not(#str_prg)")

Remove the space, as it would cause you to select children, instead of the element itself.
$("div.jqx-slider:not(#str_prg)").each(function() {
.....
});
For the second part of your question, it would be better to just use the CSS selector instead of a JS loop.

Selector ignoring elements contained in a specific element

I am currently working on a software plugin which scans a page for links in order to edit them. But there is a problem: I dont want to edit links that are contained in a specific element (in this case: an edit box). The elements contained in this edit box can also be nested, so parent might not be appropriate.
Is there any way to exclude elements via selector that are contained in a specific element?

You can run this plain JavaScript, it returns all elements with the matching pattern not in the container you specify.
var anchors = document.querySelectorAll('*:not(.editBox)>a.link');
Assuming your not wanted container has a class of "editBox" and you can change the matching "link" class to be any query selector you want, can be a plain 'a' for all anchor elements. I created a JSFiddle as a demo.

This doesn't all have to be on one selector. You could very simply use your regular selector to catch all the elements, and then execute a not() function to trim down the elements to only those you need.
var elems = $( "a" ); // all anchor links
elems = elems.not( ".ignore_me" ); // remove all links with the "ignore_me" class.
You could even combine these two into one command using function chaining:
var elems = $( "a" ).not( ".ignore_me" );
A third option that I feel is a little less readable would be something like this:
var elems = $( "a:not( .ignore_me )" );
References:
:not()
not()