I have spans that contain words, and I'd like to figure out how to remove the last character using jquery. For instance:
<span>text inside</span>
would then be:
<span>text insid</span>
I thought it would be as simple as something like
$('span').last().remove();
But it doesn't seem like that works. It just removes the whole span element. Any ideas? Thanks!
Using jQuery text(function) is probably the least amount of code to do it.
When function given as argument it will iterate all in selector collection and expose the current text as second argument
$('span').text((_, txt) => txt.slice(0,-1));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>text inside</span><br/>
<span>Another span</span>In vanilla Javascript:
let val = document.querySelectorAll("span");
val.forEach(item => {
item.textContent = item.textContent.slice(0, -1);
});
I would do like:
$(function(){
$.fn.extend({removeLastChar:function(count = 1){
return this.each(function(i, e){
if(e.value)e.value = e.value.slice(0, -count);
if(e.textContent)e.textContent = e.textContent.slice(0, -count);
});
}});
$('#test1').removeLastChar(); $('#test2').removeLastChar();
console.log($('#test3').removeLastChar(4).val());
}); // end load<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test1'>This is Test #1</div>
<input id='test2' type='text' value='This is the Second Test' />
<button value='just a test' id='test3'>This should work too!</button>You can use JQUERY to get the length elements text(), then splice() the string using the length - 1. This will remove the last character in the string...
// For multiple elements, you can use a loop to target the element you desire to affect.
let $span = $( "span" );
$span.each(function(){
console.log($(this).text().slice( 0, -1 ));
});
// or you could reference the key in an each loop
// below I will target the third element in the list using its key => `2`
$.each( $span, function( key, value ) {
if(key === 2){
console.log( key + ": " + value.textContent.slice(0, -1) );
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>text inside</span><br>
<span>text inside is different</span><br>
<span>this is the text inside</span><br>
<span>more text inside</span><br>
<div id="display"></div>Simple answer to OP question without any reference to keys just grabbing the elements tag using jquery and slicing the text()...
let slice = $( "span" ).text().slice( 0, -1 );
console.log(slice);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>text inside</span>
You would edit the text contents not the DOM elements itself
tmp = $('span').text();
$('span').text(tmp.substring(0,tmp.length -1));
text() actually returns one concatenated string for all elements in the collection. One of the oddities in jQuery getters
Single line solution:
$('span').html($('span').html().substr(0, $('span').html().length-1));
Javascript:
// Can use tage name, id and class (span, #span, .span)
function removeLast(objName){
obj = document.querySelector(objName);
objVal = obj.innerHTML;
length = objVal.length;
obj.innerHTML = objVal.substr(0, length - 1);
}
removeLast("span");
removeLast("#id");
removeLast(".class");
HTML:
<span>Test Only Tag</span><br/>
<span id="id">Test Only ID</span><br/>
<span class="class">Test Only Class</span><br/>
const newString = someString.slice(0, -1)to get the string without the last character.last()function has nothing to do with text, so what on earth made you assume it was the right function to use?