Develop Reference

How to remove an element if it contains a link using querySelectorAll?

I tring to remove all list items that contain a link But I only remove the child element and don't know how to remove the parent.
document.querySelectorAll('li a[href^="/chennal/robin"').forEach(e => e.remove());
I tried to do it with loops, but it seems I'm just complicating the code for no reason, especially since it doesn't work.

So you need to walk up the DOM tree back up to the li and remove that.
You either need to use parentNode or parentElement if it is one element up. Or closest('li') if it is more than one element up.
e.parentNode.remove();
e.parentElement.remove()
e.closest('li').remove();

How to use jquery with an element?

I am trying to find child of a specific element with jquery. But i couldn't figure out how to use jquery functions on an element that is already selected. For example i already select a div and i want to reach it's child span.
I tried selectedElement.$('span') but it didn't work as expected;
selectedElement = e.target;
console.log(selectedElement.$('span'));
It says $() is not a function. How would i use jquery after selecting an item like this?

If you want to write it in jQuery I would do it like this:
$('div').click(function() {
console.log($(this).find('span'));
});
When you click a div the output will show you the element span in that div.

Select next element of a given type after specified element

I am trying to select an element based on whether another element has a given ID containing certain text. The problem is that there are multiple elements with this same class name on the page and I only want to select the ones that have the element with this ID directly above them. Is this possible? I tried:
if ($(".element[id*='XYZ']").length > 0){
$(".element").nextAll('.elementoselect').text('Change the text');
}
My first instinct was to do it based on them being within the same DIV but the problems is that the DIVs are given classes when the page loads and they are generic, so this is the only other way I could think of.

Use chaining with the selector
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Change the text');

If you use selector chaining , your oissue could be solved
$(".element[id*='XYZ']").nextAll('.elementoselect').text('Ch‌​ange the text')

Remove div between div using Jquery

I need to remove div elements which are loaded dynamically between two static div elements.
HTML
<div id="defaultFirst">
</div>
..
..
..
<div id="defaultLast">
</div>
There are some div elements which are loaded in between those two static div elements. Now I need to remove those before I append some other elements.
I tried using $('#defaultFirst').nextAll('div').remove() but that removed the #defaultLast element too.
I know that I can get the ids of the dynamic div and remove. But I need to know if there is any simpler way to remove those dynamic div elements?

Use nextUntil() instead of nextAll() and pass in a selector which selects your #defaultLast element:
$('#defaultFirst').nextUntil('#defaultLast').remove();
.nextUntil( [selector ] [, filter ] )
Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
— jQuery's documentation on nextUntil()
If you have elements which aren't div elements between those two which you aren't wanting to remove, you can specifically remove only div elements by passing in a selector to your remove() call:
$('#defaultFirst').nextUntil('#defaultLast').remove('div');

I would recommend getting to the cause of why the divs are appearing in the first place rather than hacking like this. However if you have to then the following should work
$('#defaultFirst').nextAll('div').not('#defaultLast').remove();
Codepen example - http://codepen.io/webknit/pen/ZeZXdQ

jQuery Remove CSS Class from all Descendants at once

Can I remove a specific CSS class from all XYZ elements within an element at once?
Example: Remove CSS class active from all <a> anchors within my search div.
If so, how?

$("#mydiv a").removeClass("active");

If search is a class:
$("div.search a").removeClass("active");
If search is an ID:
$("#search a").removeClass("active");

Yeah. You do it like this:
$("div a .className").removeClass("className")
Or, supposing you only want to do it on a certain div, as long as the div has an id attribute set, you could do this:
$("#divIDValue a .className").removeClass("className")
With jQuery selectors, # with some text after it refers to the object (div, span, anchor, whatever) with the id attribute set to whatever that text is. A period refers to all objects with that the class name matching the text coming after the period. As demonstrated above, you can nest the selector text. So in the examples above, here's what happens:
Example #1
Find all divs
Finds all anchors within all divs
Finds all of the anchors from #2 that have class .className
Example #2
Find the div with the id attribute set to "divIDValue"
Find all anchor tags within that div
Find all anchor tags within that list of anchor tags that match the class name className
Keep in mind that for all of the objects in your page, only one object can have any particular id value. So, you can have two objects with the id set to 'divIDValue' - although your page will still probably look OK, jQuery will only find the first item with id. Classes, on the other hand, can be used for multiple items (as you probably already know).

A more generic solution to remove the class from any possible element.
// I like to use find as I usually have my wrapper in a variable.
$('#my-wrapper').find('.active').removeClass('active');
Or
$('#my-wrapper .active').removeClass('active');
This will affect all elements within the wrapper: span, h3, div, li, td, etc. With html 5 there are now over 100 possible tags.