Remove spans from html with a class but keep the text [duplicate] - javascript

This question already has answers here:
Remove a HTML tag but keep the innerHtml
(7 answers)
Closed 4 years ago.
If I had the following html:
<div id="main">
This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>
How would I remove all spans that have the class class-one?
The expected output from the above html would be:
<div id="main">
This <span class="class-two">is</span> a string and I want to remove spans <span>with a</span> class
</div>
The class-two and the span without a class haven't been removed.
I also need to save the new html string into a variable which is the part I am struggling with.
Something like this:
var html = $('#main').$('.class-one').replaceWith((i, txt) => txt);

Select #main, and find .class-one. Use .replaceWith() with a function to replace with the text. Then use .end() to return to .main and get the .html():
const result = $('#main')
.find('.class-one')
.replaceWith((i, txt) => txt)
.end()
.html();
console.log(result);
.class-one {
color: red;
}
.class-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
This <span class="class-two">is</span> a <span class="class-one">string</span> and I want <span class="class-one">to remove</span> spans <span>with the</span> class class-one.
</div>

Related

How to target specific span tag in HTML using JS

Hi I have an HTML with several HTML and only a couple of span tags that I want to be fading.
I have selected all the spans:
const spans = document.querySelectorAll("span");
const animation = function () {
for (let span of spans) span.classList.toggle("fade");
};
setInterval(animation, 2400);
Now I only want to target these 2 spans inside div
<div class="animated">
Hey, I'm<br>
<span
class="color-primary mt-5 fade"
id="animated-name"
style="margin-top: 20px;"
>
Name Name
</span>
<span
class="color-primary mt-5"
id="animated-text"
style="margin-top: 20px;"
>
Text Text
<br>
Text & Text
</span>
</div>
My question is how to target only these 2 span tags to toggle fade?
why not use document.querySelectorAll('div.animated > span')?
querySelectorAll('div.className span')
Or
querySelectorAll('span')[0] //Array span length

How to select a particular <SPAN> of same class under different <DIV> [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am having different span with same class for different control...
How can I select a particular span for associate control at a time.Should I use diff span id for every span.
If you have multiple DIVs containing SPANs:
<div>
<span>Text 1</span>
</div>
<div>
<span>Text 2</span>
</div>
There are many, many ways you can can select them individually.
Here are a few:
Assigning IDs to elements
You can either assign the DIVs IDs and select them as follows:
<div id="first">
<span>Text 1</span>
</div>
<div id="second">
<span>Text 2</span>
</div>
CSS selectors:
#first span { /* Add style rules here! */ }
#second span { /* Add style rules here! */ }
Selecting with jQuery:
var first = $('#first span');
var second = $('#second span');
Or give the spans IDs and select them as follows:
<div>
<span id="first">Text 1</span>
</div>
<div>
<span id="second">Text 2</span>
</div>
CSS selectors:
#first { /* Add style rules here! */ }
#second { /* Add style rules here! */ }
Selecting with jQuery:
var first = $('#first');
var second = $('#second');
Assigning Classes to elements
As with IDs, assign identifying classes to DIVs:
<div class="first">
<span>Text 1</span>
</div>
<div class="second">
<span>Text 2</span>
</div>
CSS selectors:
.first span { /* Add style rules here! */ }
.second span { /* Add style rules here! */ }
Selecting with jQuery:
var first = $('.first span');
var second = $('.second span');
Or assign classes to the Spans:
<div>
<span class="first">Text 1</span>
</div>
<div>
<span class="second">Text 2</span>
</div>
CSS selectors:
.first { /* Add style rules here! */ }
.second { /* Add style rules here! */ }
Selecting with jQuery:
var first = $('.first');
var second = $('.second');
Using the :nth-child() selector:
For this, we need to modify the markup to include a parent element that we can select:
<article>
<div>
<span>Text 1</span>
</div>
<div>
<span>Text 2</span>
</div>
<article>
And then we can select a child of article by using article:nth-child(n):
CSS selectors:
article:nth-child(1) span { /* Add style rules here! */ }
article:nth-child(2) span { /* Add style rules here! */ }
Selecting with jQuery:
var first = $('article:nth-child(1) span');
var second = $('article:nth-child(2) span');
If you are using jquery, just do it like this:
$('span[class="yourclassname"]')
If your control in which you are having span have different ids or tags then you can find the span like $('#controlId span.commonClass') or $('controlTag span.commonClass'). For clear information please provide your html.
Yes you can find using J query following code will help you
<script type="text/javascript">
$(function () {
var Span = $("#ControlID .SpanClass");
});
</script>

Mass replace of elements [duplicate]

This question already has answers here:
Recursively change element type with jQuery, why it's partially working?
(2 answers)
Closed 7 years ago.
I'm trying to replace all the child elements in a certain element to DIVs.
I have the following structure:
<div id="wrapper">
<span>
<span>
<span>
<span></span>
<span></span>
</span>
</span>
</span>
</div>
I've tried replaceElements($('#wrapper')):
function replaceElements($element){
var children = $element.find("*");
var current;
for(var i=0; i<children.length; i++){
current = $(children[i]);
current.replaceWith("<div>" + current.html() + "</div>");
}
}
However this doesn't work because when it tries to change the N+1 element it all ready doesn't exist because it was replaced when doing the Nth element. N+1 is a descendant of N and thus is being changed when changing the .html() of N. Preserving element attributes is not an issue here.
How can I change all the child SPANs into DIVs, please?
You should not use the html content in the replaced element, instead need to add the dom elements to it
function replaceElements($element) {
$element.find("*").replaceWith(function() {
return $('<div></div>', {
html: this.childNodes
});
})
}
replaceElements($('#wrapper'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<span>1
<span>2
<span>3
<span>4</span>
<span>5</span>
</span>
</span>
</span>
</div>
Note: No attributes of the elements will be copied

Surround only text with node

I have some html that is in the form
<span class="prefix">something</span> (Optional)
Text
<span class="badge">Something else</span> (optional, can be multiple)
<span class="postfix">Another thing</span>
And I want to wrap the Text, but not the spans, in another span so that I can extract and replace it using jQuery as necessary. I can't edit the back end code that is generating this HTML. Given that I don't know in advance whether the first span will be there, or how many spans there will be at the end, is there any way to wrap the plain text so that it can be operated on?
I am hoping to get an output that looks something like this:
<span class="prefix">something</span>
<span class="txt">Text</span>
<span class="badge">something else</span>...
<span class="postfix">another thing</span>
Try this:
$('#container').contents()
.filter(function() { return this.nodeType === 3 })
.wrap('<span class="txt" />');
Based on this answer: https://stackoverflow.com/a/5291776/616535
filter() the contents() of the container element to those that are pure text nodes
wrap() them in a span
$('#container').contents().filter(function() {
return $(this)[0].nodeValue && $(this)[0].nodeValue.trim();
}).wrap('<span class="txt"/>');
.txt{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<span class="prefix">something</span>
Text
<span class="badge">Something else</span>
<span class="postfix">Another thing</span>
</div>

wrapping div around string using jquery

How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.
You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');
$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?

Categories