0

我有包含单词的跨度，我想弄清楚如何使用 jquery 删除最后一个字符。例如：

<span>text inside</span>

那么将是：

<span>text insid</span>

我以为它会像这样简单

$('span').last().remove();

但这似乎行不通。它只是删除了整个 span 元素。有任何想法吗？谢谢！

4

7 回答 7

1

在香草 Javascript 中：

let val = document.querySelectorAll("span");

val.forEach(item => {
  item.textContent = item.textContent.slice(0, -1);
});
于 2020-09-07T22:59:56.910 回答
1

使用 jQuery text(function)可能是最少的代码量。

当函数作为参数给出时，它将迭代选择器集合中的所有内容并将当前文本作为第二个参数公开

$('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>

于 2020-09-07T23:30:29.087 回答
0

您可以使用 JQUERY 获取length元素text()，然后splice()使用长度 - 1 获取字符串。这将删除字符串中的最后一个字符...

// 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>

对 OP 问题的简单回答，无需任何参考键，只需使用 jquery 抓取元素标签并切片 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>

于 2020-09-07T23:32:19.547 回答
0

单线解决方案：

$('span').html($('span').html().substr(0, $('span').html().length-1));
于 2020-09-08T04:54:37.367 回答
0

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/>
于 2020-09-07T23:06:30.963 回答
0

我会喜欢：

$(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>

于 2020-09-07T23:23:03.453 回答
0

您将编辑文本内容而不是 DOM 元素本身

tmp = $('span').text();
$('span').text(tmp.substring(0,tmp.length -1));
于 2020-09-07T22:52:03.910 回答