クリックハンドラで文字列の一部をテキストエリアから削除します

Question

ユーザが「バスケットに追加」ボタンをクリックすると、テキストエリアに商品タイトルを追加するJavaScriptがいくつかあります。

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

ユーザーがその特定の行の削除ボタンをクリックした場合はどうすればテキストエリアからその行を削除することができますか？

テキストエリアは次のようになります。ユーザーは、ユーザーが製品2の「削除」をクリックすると、テキストエリアが

のようになります。3つの製品

を追加した場合

Product name 1 
Product name 2 
Product name 3 

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

あなたがtextarea内のキャレットの位置を取得する必要があり、現在の行が正確であるかどうかを確認するために、コンテンツを分割することを

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

ような何かを行うことができますあなたが探している価値

この例では、私は、一例として、テキストTEXT TO REMOVEを使用：

$('#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) 
 
    } 
 
});

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