I have the following code snippet :
<div class="caption" >
<span class="id">
<span class="eccc-1200">F
<span class="small-caps">I</span>
<span class="small-caps">G</span>
<span class="small-caps">U</span>
<span class="small-caps">R</span>
<span class="small-caps">E</span>
</span> 1.1: </span>
<span class="content">Norme d’un vecteur</span></div>
and I would like to remove the ":" character on </span> 1.1: </span> line, i.e to get </span> 1.1 </span> .
I tried :
$('div.caption span.id').text().replace(':','')
but it doesn't seem to work, I don't know why ...
If someone could see what's wrong,
Thanks
Well, the jQuery method .text() will return the content in a text format, and then you're using .replace(...) to replace the content and after that you aren't doing anything with the result of the replace method, you can do something like:
var result = $('div.caption span.id').text().replace(':','')
$('div.caption span.id').text( result )
try this
var span = $('div.caption span.id')
span.text(span.text().replace(':', ''))
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('div.caption span.id').text($('div.caption span.id').text().replace(/:/g, ''))
});
</script>
</head>
<body>
<div class="caption">
<span class="id">
<span class="eccc-1200">F
<span class="small-caps">I</span>
<span class="small-caps">G</span>
<span class="small-caps">U</span>
<span class="small-caps">R</span>
<span class="small-caps">E</span>
</span>
1.1:
</span>
<span class="content">Norme d’un vecteur</span>
</div>
</body>
</html>
Does this work?
var $element = $('div.caption span.id')
$element.html($element.html().replace(':',''))
if you want every : replaced
.replace(/:/g,'');
Also, change to html() if you want to keep the spans and rest of the markup. If you just want the text then stay with text().
Related
I have innerHTML that looks like this:
<span class="test"> <span> </span> Hello I am here <span class="test1"> </span> </span>
I want to remove all of the nested span tags so that I get this:
<span class="test"> Hello I am here </span>
I have tried using .replace('', '').replace('', '') in but would have to check the last span somehow and also there could be different spans that are dynamically being made from google docs so it would be better if I could do a replace on all of the spans that is not the first or last span.
Try This
$('.test').find('span').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="test"> <span>dummy data </span> Hello I am here <span class="test1"> dummay data</span> </span>
This will work
"use strict";
const elm = document.querySelector(".test");
elm.innerHTML = elm.innerText;
console.log(elm.outerHTML);
<span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>
Use this code to get rid of any empty span elements.
const allSpan = document.querySelectorAll("span");
allSpan.forEach(item => {
if(item.childElementCount === 0 && item.textContent.trim().length === 0){
item.parentElement.removeChild(item)
}
})
<span class="test">
<span> </span> Hello I am here <span class="test1"> </span>
</span>;
You can see the result by inspecting the code in the browser
You can do this by setting the outer span's textContent to it's own textContent - because reading an element's textContent doesn't return any markup tags intersperse with the text.
Resetting textContent also avoids the content of text being parsed by the HTML parser, as it would if used to set the outer element's innerHTML property.
"use strict";
let testSpan = document.querySelector(".test");
testSpan.textContent = testSpan.textContent;
console.log( testSpan.outerHTML);
<span class="test"><span> </span> Hello I am here <span class="test1"> </span> </span>
If you wanted to you could replace consecutive whitespace characters witha single space character before assigning back textContent.
I have this
<div id="chart1" class="bar-chart secondary" data-total="42" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
and I have one javascript variable var score that I need to assign to data-total="42"and <span class="bar-chart--text">42% </span>
My intention is to replace 42 with my javascript variable. I have tried this
document.getElementById("chart1").innerHTML =score that I have found from this forum but did not work. Please help.
<div id="chart1" class="bar-chart secondary" data-total="document.getElementById("chart1").innerHTML =score" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
get the element in a JS script
then set elem.dataset.total
document.getElementById("chart1").dataset.total = score
<body>
<div id="chart1" class="bar-chart secondary" data-total="42" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
<script type="text/javascript">
var score = 20
document.getElementById("chart1").dataset.total = score
</script>
</body>
For setting the html of an element, you can use innerHTML, just need to select that element in another lookup.
document.querySelector(".bar-chart--text").innerHTML = score
Specifically, I'll have a bunch of span classes without names and I only want the script to delete the spans that contain the text "Test" in them after the page has loaded.
<span class=""></span>
<span class=""></span>
<span class="">Test</span> //<- Delete this one!
<span class=""></span>
Using jQuery, only need 1 line.
$('span:contains("Test")').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="">1</span>
<span class="">2</span>
<span class="">Test</span>
<span class="">3</span>
Try this it will help you.
Javascript
const spans = document.querySelectorAll('span') // fetch all the span elements
spans.forEach((node) => {
if(node.innerHTML === 'Test') {
node.remove() // at your condition remove the element from DOM
}
});
jQuery
$('span:contains("Test")').remove()
Working demo
Use Jquery .each() loop on the target element list... Then use .remove()
on the this instance of the looped element if conditional is true.
let $span = $('span');
$span.each(function() {
if($(this).text() === "Test"){
$(this).remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="">Other text</span>
<span class="">Other text</span>
<span class="">Test</span> <!-- Delete this one! -->
<span class="">Other text</span>
I want to remove all the span tags having class article and attach a new span tags to the content
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
In the javascript i've a text,
var text = "bar lorem ipsum";
I want javascript to find this in the DOM and if it is there, then remove the span tags from the elements and put all of them in a single span tag, like this
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar lorem ipsum</span>
</div>
Any help would be greatly appreciated.
You can use jQuery each() function for this, check updated snippet below:
var newHTML ='';
$('.asd span.article').each(function(){
newHTML += $(this).text() + " ";
$(this).remove();
})
$('.asd').append("<span class='article'>"+newHTML+"</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Here you check with jquery:
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Js
$(".article").remove();
$(".asd").append('<span class="article">bar lorem ipsum</span>');
Hope this helps you.
Try this .use with each function jquery .check the class name includes in array .Is not Then pass the the class name to array .
And also added the respected text with eq(0)(first element of same classname)
var arr=[];
$('.asd').children('span').each(function(a){
var cls =$(this).attr('class');
if(!arr.includes(cls)){
arr.push(cls);
}
else{
$('.'+cls).eq(0).text($('.'+cls).eq(0).text()+' '+$(this).text())
$(this).remove()
}
})
console.log($('.asd').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/
See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});
You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);