简体   繁体   English

逐行从textarea中删除文本

[英]Remove text from textarea line by line

I did a code that removes the text on the textarea line by line. 我做了一段代码,逐行删除了textarea上的文本。 However it seems it is not working it removes the first line after that the third line and repeat again any one help me please this is the code i tried: 但是似乎不起作用,它在第三行之后删除了第一行并再次重复任何一个帮助我,这是我尝试过的代码:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#remove').click(function(){
var textareavalue = $('#sometext').val().split("\n");

for(i=0; i < textareavalue.length;i++)
{
$('span').append('<br />Remove: '+textareavalue[i]);    
textareavalue.splice(0, 1);
$('#sometext').val(textareavalue.join("\n"));
}


});
});
</script>
</head> 







<textarea cols="40" rows="10" id="sometext"></textarea>
<br />
<button id="remove">Remove</button>
<br />
<span><span/>

You should use index 0 like this: 您应该这样使用索引0

$('span').append('<br />Remove: '+textareavalue[0]); 

This is because the previous displayed element is removed with splice , so your next line is again at the first position. 这是因为先前显示的元素已通过splice删除,因此您的下一行再次位于第一个位置。

Also change your loop condition, because your length is decreasing with this split : 还要更改循环条件,因为这种split会使您的length减小:

while(textareavalue.length)

You should also give an id to our span , because other span tags may exist on your page (or in future). 您还应该给span指定一个id ,因为您的页面上(或将来)可能会存在其他span标签。

It would be good to clear your span contents on every click, so it only shows the result of the last removal operation. 每次单击都可以清除span内容,因此它仅显示最后一次删除操作的结果。

And it would probably be nice to not have it happen all at the same time, because then you just see the end-result. 最好不要同时发生所有事件,因为那样您就可以看到最终结果。 You could could use a timer like this: 您可以使用这样的计时器:

HTML 的HTML

<textarea cols="40" rows="10" id="sometext">
</textarea>
<br />
<button id="remove">Remove</button>
<br />
<span id="out"><span/>

JS JS

function removeLine() {
    if ($('#sometext').val().replace(/\n$/, '').length === 0) {
        // nothing to do
        return;
    }
    var textareavalue = $('#sometext').val().split("\n");
    // log line that will be removed
    $('#out').append('<br />Remove: '+textareavalue[0]); 
    // remove line
    textareavalue.splice(0, 1);
    $('#sometext').val(textareavalue.join("\n"));
    // remove next line with delay
    setTimeout(removeLine, 200);
}

$(function(){
    $('#remove').click(function(){
        // clear log
        $('#out').html('');
        setTimeout(removeLine, 200);
    });
});

Here is a fiddle . 这是一个小提琴

for(var i=0, l = textareavalue.length; i < l; i++) {
    $('span').append('<br />Remove: '+textareavalue[0]);    
    textareavalue.splice(0, 1);
    $('#sometext').val(textareavalue.join("\n"));
}

Yes, because of using splice() method the array itself updating with new data and loop is also repeating on same array. 是的,由于使用了splice()方法,使用新数据和循环更新的数组本身也在同一数组上重复。 Change the i value to 0 inside the loop. 在循环内将i值更改为0。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM