Question

我有一些javascript，当用户点击＆＃34;添加到购物篮＆＃34; - 按钮时，将产品标题添加到textarea。

<a href="#" class="add-button" data-id="@fieldset.Id" data-producttitle="@fieldset.GetValue("productItemTitle")">Tilføj</a>

和javascript

var productTitle = settings.productTitle;           
$(".tilvalg textarea").text($(".tilvalg textarea").text() + productTitle + "\n");

如果用户点击该特定行的删除按钮，如何从textarea中删除该行？

textarea可能如下所示：

Product name 1
Product name 2
Product name 3

如果用户添加了3个产品

如果用户点击＆＃34;删除＆＃34;在产品2上，textarea应该看起来像

Product name 1
Product name 3

我不太清楚如何实现这一点。

Answer 1

更改JavaScript以使用数组来存储字符串（并且可能对它们进行排序）可能是有利的，然后您可以在输出之前修改列表。像这样：

var items = [];

// on click for adding
    items.push(productTitle); // Add item to end of array
    $(".tilvalg textarea").text(items.join('\n')); // Join items by new line and output

// on click for removing
    var index = items.indexOf(productNameToFind); // Find an item in the array
    if(index != -1)
        items.splice(index, index); // Remove item at found index
    $(".tilvalg textarea").text(items.join('\n')); // Join items by new line and output

Answer 2

你可以做那样的事情

$('#YourRemoveButton').on('click', function () {

        var lines = $('#box').val().split(/\n/);
        lines['YourLineIndex - 1 '] = "";
        lines = lines.filter(function(v){return v!==''});
        $("#box").val(lines.join("\n"));

    });

Answer 3

您需要在textarea内获取插入符号的位置并拆分内容，以查看当前行是否正是您要查找的值。

在此示例中，我使用文本TEXT TO REMOVE作为示例：

＆＃13;

$('#btn1').click(function() {
  // Get caret position
  cur = $('#ta').prop("selectionStart");
  
  // Save the value of the textarea
  str = $('#ta').val();
  
  beforeCursor = str.substr(0, cur);
  afterCursor = str.substr(cur);
  
  splitted_before = beforeCursor.split("\n")
  splitted_after = afterCursor.split("\n")
  lastline_before = splitted_before.pop();
  firstline_after = splitted_after.shift();
  
  fullline = lastline_before + firstline_after;
  
  if (fullline == "TEXT TO REMOVE") {
    new_str = splitted_before.join("\n") + "\n" + splitted_after.join("\n")
    $('#ta').val(new_str)
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta" style="width: 450px; height: 250px;"></textarea><br />
<button id="btn1">Remove</button>

＆＃13;

使用点击处理程序

3 个答案: