Develop Reference

Delete text between two tags with jQuery

Hello there fellow developers, I am trying to delete a certain character between two tags using jQuery:
<div class="product-details">
<p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p>
<strong>1</strong> x
<span class="price">9,14 €</span>
</div>
In this case the "x" between the strong and the span tag. I can't search for "x" in the product-details class because there could be an "x" in the name of the product. Thats why I thought it would be the best thing to say that everything between the <strong> and <span> should be deleted.
Also this must be done using jQuery, I have no access to this code to delete it myself. Hope anybody has a solution for me since nothing worked for me so far.

Given the example you can simply remove all child textNodes from the .product-details div. You can do that in jQuery by using contents(), filter() then remove():
$('.product-details').contents().filter(function() {
return this.nodeType == 3 && this.nodeValue.trim();
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-details">
<p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p>
<strong>1</strong>
x
<span class="price">9,14 €</span>
</div>

Alternatively, You can get target the node element using DOM relationship. Here in example, You can get a reference to <strong> node then get desired element using nextSibling
var element = document.querySelector('.product-details > strong');
//element.nextSibling.nodeValue = "Modified Value";
element.nextSibling.parentNode.removeChild(element.nextSibling)
<div class="product-details">
<p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p>
<strong>1</strong> x
<span class="price">9,14 €</span>
</div>

Use $('.product-details').children() to get the elements with the tag. Since, x do not have any tag this will be removed. Then, set this result as the new html content of .product-details.
$('.product-details').html($('.product-details').children());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-details">
<p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p>
<strong>1</strong>
x
<span class="price">9,14 €</span>
</div>

jquery - select an element with specific content

I have an html structure like this:
<div class="test">
<span class="content">1</span>
</div>
<div class="test">
<span class="content">2</span>
</div>
...
<div class="test">
<span class="content">100</span>
</div>
In my javascript code, I need to get an <span> element with class content that has exactly 1 or 2 , ..., 100
I tested jquery .contains method, but this returns all elements that have for example 1. such as 1, 12, ....

You can use filter method which accepts a callback function applied to every item.
var array=$('.test').find('.content').filter(function(){
return $(this).text().trim()==100;
});
console.log(Array.from(array));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<span class="content">1</span>
</div>
<div class="test">
<span class="content">2</span>
</div>
<div class="test">
<span class="content">100</span>
</div>

You can proceed in the following manner:
$('.content').each(function(){
if($(this).html() == "2")
{
console.log("THE SPAN WITH 2 IS ");
console.log($(this)[0]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<span class="content">1</span>
</div>
<div class="test">
<span class="content">2</span>
</div>
<div class="test">
<span class="content">100</span>
</div>
What we do here is check through the content class of the spans and check if their inner html is 2 and if it is we console.log it.

You can use the vanilla .indexOf() method.
The indexOf method takes a parameter of the string you want to find and returns either the index (if it's found), or -1 if it's not.
var myEl = document.querySelector(".test"):
for loop...
if( myEl.innerHTML.indexOf(2) != -1 ){
console.log("This element contains the number 2")
}

You can use .filter(), get and check .textContent or .innerHTML of element, at .filter() callback you can use RegExp N$ where N is number to match. For example, to match elements having "1" or "2" set at .textContent you can use RegExp /1$|2$/; to match "100", /100$/; with RegExp.prototype.test()
var filtered = $("span.content").filter((_, {textContent}) =>
/1$|2$/.test(textContent));
filtered.css("color", "green");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="test">
<span class="content">1</span>
</div>
<div class="test">
<span class="content">2</span>
</div>
...
<div class="test">
<span class="content">100</span>
</div>

You can do something like this..
$('.test').each(function() {
if($(this).text == '1')
{
var a = $(this).html();
}
});
a will now contain the html of that span which contains your text.

Check for number of html element then run a function

I have three different scenario where the span element presents.
No child span element:
<div class="text" contenteditable="true" id="example">
<div class="outside">Type here</div>
</div>
One child span element:
<div class="text" contenteditable="true" id="example">
<div class="outside">Type here <span class="inside"> please.</span></div>
</div>
Multiple child span element with same class name
<div class="text" contenteditable="true" id="example">
<div class="outside">Type here<span class="inside"> please </span> thanks</div>
<div class="outside">Name <span class="inside"> please.</span> thanks.</div>
</div>
I want to run the following function:
var len = $('span.inside').get(0).nextSibling.length;
console.log(len);
Because the span class can be present once or multiple times, or not at all, I want to check for the presence of the span. Then based on the number of times the span element is there, I would need to run the function for all the span element.
How would I achieve this?

var length = $('span.inside').length;
if (length > 0) {
$('span.inside').each(function() {
var len = $(this).get(0).nextSibling.length;
console.log(len);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text" contenteditable="true" id="example">
<div class="outside">Type here<span class="inside"> please </span> thanks</div>
<div class="outside">Name <span class="inside"> please.</span> thanks.</div>
</div>
Use class and get length.
For many span use .each() to iterate over

I want to check for the presence of the span.
You can achieve this by checking the length property of the selector:
var $spans = $('span.inside');
var numberOfSpans = $spans.length;
Based on the number of times the span element is there, I would need to run the function for all the span element
This is a simple if statement, then you can use each() to loop over the elements in a selector:
if (numberOfSpans > 5) { // 5 just an example
$spans.each(function() {
// do something with the span here...
});
}

Jquery selector next element

Is there is a way to select every next element (nested or not) ?
Example :
<div class="div1">
<span class="span2">span1</span>
<div class="div2">
<span class="span2">span2</span>
</div>
<span id="current_span">current span></span>
<span class="span2">span3</span>
<div class="div2">
<span class="span2">span4</span>
</div>
</div>
I would like to do something like it :
$("#current_span").[select_every_next_item_with_span2_class].hide();
span3 / span4 hidden
And
$("#current_span").[select_every_prev_item_with_span2_class].show();
span1 / span2 visible

You could do this with jQuery's nextAll() and prevAll() functions.
For your code, this would be:
$("#current_span").nextAll().hide();
$("#current_span").prevAll().hide();
And as always, you can traverse the items in the list from the functions if you wish to do something separate with specific ones (i.e. use the each() function).
EDIT:
If you want to select the child elements of the siblings as well, you can do:
$("#current_span").nextAll().children().andSelf().hide();
This selects both the siblings and the children of the siblings.
I also added a code snippet to show you how this can work with your code. Click on currentspan1 to toggle the top two elements and currentspan2 to toggle the bottom two.
$("#current_span1").click(function(){
$(this).prevAll().toggle();
});
$("#current_span2").click(function(){
$(this).nextAll().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
<span class="span2">span1</span>
<div class="div2">
<span class="span2">span2</span>
</div>
<span id="current_span1">current span1</span> <br>
<span id="current_span2">current span2</span> <br>
<span class="span2">span3</span>
<div class="div2">
<span class="span2">span4</span>
</div>
</div>

You can use nextAll() to get all next siblings and then traverse each one for the elements you need.
$("#current_span").nextAll().each(function () {
if ($(this).is(".span2")) {
$(this).hide();
}
$(this).find(".span2").hide();
});
$("#current_span").prevAll().each(function () {
if ($(this).is(".span2")) {
$(this).show();
}
$(this).find(".span2").show();
});
Fiddle example https://jsfiddle.net/tq3ubLap/

To retrieve all the previous/next .span2 elements, regardless of their relationship to the current .span2 you could use index('.span2') to get their index within the scope of the document. From there you can use slice() to retrieve the required elements. Try this:
$('.span2').click(function() {
var $spans = $('.span2');
var index = $(this).index('.span2');
var $prev = $spans.slice(0, index);
var $next = $spans.slice(index + 1);
// for demo purposes only
$('.span2').removeClass('next prev');
$prev.addClass('prev');
$next.addClass('next');
});
.prev {
background-color: #C00;
color: #FFF;
}
.next {
background-color: #CC0;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
<span class="span2">span1</span>
<div class="div2">
<span class="span2">span2</span>
</div>
<span id="current_span">current span></span>
<span class="span2">span3</span>
<div class="div2">
<span class="span2">span4</span>
</div>
</div>

jQuery Insert closing div tag and opeing div tag after count

I am trying to get jquery to close a div and inset an opening div with a class after x amount of items.
Here is what I have tried:
$(this).after('</div> <div class=\"bar">Bar');
it outputs:
<div class="bar">Bar</div>
What I need is:
<div class="item2">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
<div class="bar">
<div class="CountThese2"> Count Me </div>
<div class="CountThese2"> Count Me </div>
</div>
http://jsfiddle.net/yoderman94/JEtj2/

You can't add half a tag. I think what you're trying to do is wrap the elements. Your fiddle is pretty messy, but here's a simple example of how you can do that:
http://jsfiddle.net/9Q62H/
while($('#wrapper > a:lt(2)').wrapAll('<div class="bar">bar</div>').length) { }
Which turns this:
<div id="wrapper">
1
1
1
1
1
1
1
1
</div>
into this:
<div id="wrapper">
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
<div class="bar">bar
1
1
</div>
</div>

You can't manipulate the DOM that way, with or without jQuery. To accomplish the same thing, insert a new div after the current div's parent, and then move all of the current div's following siblings to the new div:
var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append($(this).nextAll());
Edit: To preserve text nodes, including the whitespace between your links, it's not quite as simple as $(this).nextAll(), sadly. You need to use .contents() to select the text nodes, then slice at the index of this:
var contents = $(this).parent().contents();
var bar = $("<div>").addClass("bar").text("Bar");
bar.insertAfter($(this).parent());
bar.append(contents.slice(contents.index(this) + 1));
http://jsfiddle.net/JEtj2/6/

I'm going to recommend a different approach here. When you call .after() you need to be giving it a complete open and close tag. You cannot open a tag then close it later like you are trying to above.
My advice would be to try and take an approach like the following, so you can pass a complete open and close tag to .after()
var theDiv = "<div class='bar'>";
for(var i = 0; i < 2; i++) {
theDiv += '<div class="CountThese2"> Count Me </div>';
}
theDiv += "</div>";
$('#thing').after(theDiv);
See how I constructed the whole div including contents before calling .after() ?