After spending all day working on one of my first JavaScript projects, I have created a script that allows users to insert items into a text box using a field and submit button. Each item in the list comes with a remove button for deletion.
Now, I am looking for some innovative ideas on how to efficiently remove items from the list by clicking the remove link next to each item. I am struggling to find a clean and simple solution to implement this functionality.
Check out the live demo on Jsfiddle: http://jsfiddle.net/spadez/ZTuDJ/46/
// Disable main input if JS is enabled
$("#responsibilities").prop('disabled', true);
// $("#responsibilities").addClass("hidden");
// Add fields when JS is enabled
$("#resp").append('<input placeholder="Add responsibility" id="resp_input" ></input><input type="button" value="Add" id="add"> ');
// Add items to input field
var eachline='';
$("#add").click(function(){
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>");
$('#resp_input').val('');
});
I'm reaching out to more experienced individuals for help and advice on achieving an efficient method for removing items from the list. Any assistance or guidance would be greatly appreciated.