entfernen Teil der Zeichenfolge aus Textarea mit Click-Handler

Question

Ich habe einige Javascript, die einen Produkttitel zu einem Textfeld hinzugefügt, wenn der Benutzer auf einen "Add to Basket" -Button klickt.

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

Und das Javascript

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

Wie kann ich diese Zeile aus dem Textbereich, wenn der Anwender auf eine Schaltfläche Entfernen für die jeweilige Zeile entfernen?

Der Textbereich könnte wie folgt aussehen:

Product name 1 
Product name 2 
Product name 3 

, wenn der Benutzer 3 Produkte

hinzugefügt Wenn der Benutzer klickt dann auf „Entfernen“ auf Produkt 2 sollte das Textfeld wie

aussieht

Product name 1 
Product name 3 

Ich bin nicht ganz sicher, wie man das erreicht.

Answer 1

Es könnte vorteilhaft sein, Ihr JavaScript zu ändern, um ein Array zu verwenden, um die Zeichenfolgen zu speichern (und vielleicht zu sortieren), und dann können Sie Ihre Liste vor dem Ausgeben ändern. So etwas wie so:

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

Sie können wie etwas tun, dass

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

Sie müssen die Position des Cursors innerhalb des textarea und teilen Sie die Inhalte zu sehen bekommen, wenn die aktuelle Zeile genau die Wert, nach dem Sie suchen.

ich den Text in diesem Beispiel verwendet TEXT TO REMOVE als Beispiel:

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