In my JQuery, there is a list named additionalInfo which gets populated using the function below:
$('#append').on('click', function () {
//validate the area first before proceeding to add information
var text = $('#new-email').val();
var li = '<li>' + text + 'input type="hidden" name="additionalInfo" value="'+text+'"/> </li>';
$('#additional-info-list').append(li);
$('#new-email').val('');
});
This function not only adds the information to the list for later use, but also creates an <li> element displaying the information. I have implemented a button on each <li> that, when clicked, removes the corresponding list item. However, I am struggling with removing the info text from the additionalInfo list completely. Below is what I have for this method:
$('#removeEmail').on('click', 'li>.remove-btn', function (event){
$(event.currentTarget).closest('li').remove();
});
Can you suggest how I can extract the specific segment of info text from the <li> and then remove it from additionalInfo?