Remove the item from the list using jquery


I have been working all day on one of my first javascripts which is designed to have a user insert items into a text box using a field and submit button. Items that are put in the list have a remove button next to them.

I was wondering if anyone had any smart ideas about how I could remove items using the remove link next to the list. When this link is clicked I want to have it removed from the list but I can't really see a clean and simple way of doing it.

Demo Jsfiddle:

// If JS enabled, disable main input
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");

// If JS enabled then add fields
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');

// Add items to input field
var eachline='';
    var lines = $('#resp_input').val().split('\n');
    var lines2 = $('#responsibilities').val().split('\n');
    if(lines2.length>10)return false;
    for(var i = 0;i < lines.length;i++){
        if(lines[i]!='' && i+lines2.length<11){
        eachline += lines[i] + '\n';

    $('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"<span class='right'><a href='#'>Remove</a></span></li>");


I know people have much more experience, so if anyone is willing to give me any help or advice on how this could be achieved I would really apprecaite it.

Really simple :

$(document).on('click', '.right a', function(){

Fiddle :

To remove the textarea too, use this:

$(document).on('click', '.right a', function(){
    var el = $(this).closest('li')
    var index = $('li').index(el);
    var text = eachline.split('\n');
    text.splice(index, 1);
    eachline = text.join('\n')

Fiddle :