javascript - 从文本区域中逐行删除文本

标签 javascript jquery html ajax

我编写了一段代码,逐行删除文本区域上的文本。然而,它似乎不起作用,它删除了第三行之后的第一行,并再次重复任何人帮助我,这是我尝试过的代码:

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

最佳答案

您应该像这样使用索引0:

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

这是因为之前显示的元素已被 splice 删除,因此下一行又位于第一个位置。

还要更改循环条件,因为您的长度随着此分割而减少:

while(textareavalue.length)

您还应该为我们的 span 提供一个 id,因为您的页面上(或将来)可能存在其他 span 标记。

最好在每次点击时清除 span 内容,这样它只显示上次删除操作的结果。

最好不要让这一切同时发生,因为那样你就会看到最终结果。您可以使用这样的计时器:

HTML

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

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);
    });
});

这是一个fiddle .

关于javascript - 从文本区域中逐行删除文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33841136/

相关文章:

javascript - 根据javascript中的索引将数组分成两部分

javascript - 在某些情况下,美化无法处理小于

javascript - 当 div 具有特定类时更改元素 css

php - 如何在灯箱画廊中将图像下方的文本居中?

html - 更改按钮上虚线边框的颜色

html - @font-face 导致加载时间变慢

javascript - 如何使用 angular.element 选择 id?

javascript - Angular UI-Select 为 "Tagging"对象添加重复标签

javascript - 无法理解如何在 WordPress 中正确排列 jQuery

jquery - 在 Internet Explorer 中针对 CORS PATCH 请求出现 "Permission Denied"错误