Develop Reference

select a next element with a specific class in JS

Well, I have n elements with the class "class_one"
and certain other elements with the class "class_two".
These elements are nested and in some cases there are other elements in that nest, what I need is to select the next element with a specific class.
let class_one = document.querySelectorAll('.class_one');
class_one.forEach(element => {
element.addEventListener('click',()=>{
console.log("From this element, the next one containing the class class_two");
})
});
<div class="class_one">
click 1
</div>
<div class="class_two">elemento 1</div>
<div class="class_one">
click 2
</div>
<div class="class_four"></div>
<div class="class_two">elemento 2</div>
<div class="class_one">
click 3
</div>
<div class="class_six"></div>
<div class="class_two">elemento 3</div>
<div class="class_one">
click 4
</div>
<div class="class_five">click 5</div>
<div class="class_two">elemento 4</div>
<div class="class_one">
click 6
</div>
<div class="class_two"></div>
Personally, I would like an answer without using Jquery, but all are welcome.

Select any element with class '' in JS

how can I extract the text-value of an element with class 'test' f.e. based on the numbering?
Here is an example:
console.log($('ex.test')[3].text())
Thx in advance

Either use .eq() that will return an element from the index of it or use a CSS selector like :nth-child().
console.log($('.test').eq(3).text());
console.log($('.test:nth-child(4)').text());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="test">div 1</div>
<div class="test">div 2</div>
<div class="test">div 3</div>
<div class="test">div 4</div>
</div>

Wrap divs depends on their classes with pure JavaScript

I have the next code:
<div class="components_container">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
And I would like to wrap both groups in different div tags, like this:
<div class="components_container">
<div class="group1">
<div class="first_group">Element 1</div>
<div class="first_group">Element 2</div>
<div class="first_group">Element 3</div>
</div>
<div class="group2">
<div class="second_group">Element 4</div>
<div class="second_group">Element 5</div>
<div class="second_group">Element 6</div>
</div>
</div>

To do what you are trying to accomplish, you can do this in pure javascript:
Get a reference to the container (this code implies that you have only one element with that class):
var container = document.querySelector(".components_container");
Create the two external divs, add the classes and append them to the container:
var first_cont = document.createElement("div");
var second_cont = document.createElement("div");
first_cont.classList.add("group1");
second_cont.classList.add("group2");
container.appendChild(first_cont);
container.appendChild(second_cont);
Get the divs with a specific class and change their parent (remove child / append child):
var first_elements = container.querySelectorAll(".first_group");
var second_elements = container.querySelectorAll(".second_group");
for (el of first_elements) {
container.removeChild(el);
first_cont.appendChild(el);
}
for (el of second_elements) {
container.removeChild(el);
second_cont.appendChild(el);
}
This will do what you want, but please, next time try to add some more information, like some context, the steps that you tried or where are you finding difficulties :)

jquery detecting and removing an element clicked

I have a hierachy of DIVs with classes associated but not IDs. How can I remove the item being clicked?
<div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
<div class="minibox" onclick="remove_me()">Box1</div>
</div>
<script>
function remove_me(){
///remove the clicked div
}
</script>

$('div .minibox').click(function(e){
$(e.target).remove();
});

$('.minibox').click(function() { $(this).remove(); });

Change
<div class="minibox" onclick="remove_me()">Box1</div>
to
<div class="minibox" onclick="remove_me(this)">Box1</div>
then use
<script>
function remove_me(elm){
$(elm).remove();
}
</script>

Inside the jQuery document.ready() event, you need to bind a click handler to the div's
$(document).ready(function() {
$('.minibox').click(function(e){
$(this).remove();
});
});
Check out jQuery remove() and click().
The this inside the event handler refers to the element that was clicked on.

$(document).ready(function() {
$('.minibox').click(function () {
$(this).remove();
});
});
Check out remove().

If you can use jQuery to register your event it is as easy as:
$(".minibox").click(function(){
$(this).remove();
});
Code example on jsfiddle.

your html:
<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
<div class="box">some content</div>
ect...
your jQuery
$(function(){ //make sure your DOM is ready
$("div.box").click(function(){ // bind click on every div that has the class box
$(this).remove(); //remove the clicked element from the dom
});
});
Demo with fadeOut animation:
http://jsfiddle.net/qJHyL/1/ (and fancy delete icon)

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
then you would use
$(".box").bind("click", function() {
$(this).fadeOut(500, function() {
// now that the fade completed
$(this).remove();
});
});
Example in JSBIN

jQuery .live function not working

Can somebody please tell me why this script is not working? It is supposed to work, but it doesn't, I am getting the id correctly, but Divs are not displaying properly. My idea is to display one div based on the click, and hide the other Divs.
Script
$(document).ready(function() {
$("a").live("click", function(){
var idV = $(this).attr("id");
alert(idV);
$("#"+idV+"div").css("display","block");
return false;
});
});
HTML
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div id="solution1" style="display:none;">Solution 1</div>
<div id="solution2" style="display:none;">Solution 2</div>
<div id="solution3" style="display:none;">Solution 3</div>
<div id="solution4" style="display:none;">Solution 4</div>

Your div ids are wrong.
Try:
<div id="solution1div" style="display:none;">Solution 1</div>
instead of
<div id="solution1" style="display:none;">Solution 1</div>
Edit:
JSBIN: Preview
JSBIN: Source Code
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div>
<div id="solution1div" style="display:none;">Solution 1</div>
<div id="solution2div" style="display:none;">Solution 2</div>
<div id="solution3div" style="display:none;">Solution 3</div>
<div id="solution4div" style="display:none;">Solution 4</div>
</div>
jquery:
$("a").live("click", function(){
var idV = $(this).attr("id");
$("#"+idV+"div").siblings().hide();
$("#"+idV+"div").show();
return false;
});

mmmm the error is actually there man..
see:
$("#"+idV+".div").css("display","block");
change it to:
$("div#"+idV).css("display","block");

You're reusing ID attributes. IDs need to be unique to a document.
You can't have anchors and divs with the same ID.