html - Redirecting from javascript with css -

i win32 amateur coder , newbie web programmer. personal project trying modify to-do list code in codepen.

http://codepen.io/arjancodes/pen/bahkb

here code:

// rid of default value in input box $('input[name=todoitem]').focus(function() {   $(this).val(''); })  $('#add').click(function() {    var $input = $('input[name=todoitem]').val();    if ($input.length > 0) {     $('#list').append('<li class=' + 'close' + '>' + $input + '</li>');   } else {     alert("we'd love nothing.");   }    // reset input box no text   $('input[name=todoitem]').val(''); });  // remove list item $('#list').on('click', '.close', function() {   $(this).hide('2000', function() {      $(this).remove();   });  }); 

in list project, when clicking on "x" button, deletes row. when click text, deletes. going do, separate delete button , text. user write link input box , add list. after user click text , page redirect link. hoping can show me right direction, not asking write code me!

here's start: codepen.

if want have delete button , text separated, should separate elements. example:

<li class='item'>do stuff <i class='close'></i></li> 

the css updated float <i> right, , apply :after button styling it.
js updated match .close , remove parent/ancestor .item:

$('#list .item .close').on('click', function() { ... ; return false; } ); 

the return false there clicking .close not 'bubble' event , invoke new handler on .item:

$('#list').on('click', '.item', redirect_function); 

the redirect_function not closure, because it's re-used in #add event handler:

$('#list').append("<li class='item'>" + $input + "<i class='close'></i></li>") 

as redirecting url, can manipulate window.location. but, since todo list purely client side, changes not persisted.

if want store todo lists on server, have communicate changes server. classically done using like:

<form method='post'>   <ul>     <li><input type='text' name='item[]' value='stuff do'/></li>     <li><input type='text' name='item[]' value='....'/></li>   </ul>   <button type='submit' name='action' value='save-todo-list'>save</button> </form> 

on server-side, have script removes todo list items authenticated user database, , insert posted items.

alternatively, can use ajax. instance, 'delete item' handler be

$('#list').on('click',  '.item .close', function() {   $.ajax( {      method: 'post',      url: "/api/todo/item/delete",      data: ...   } } ); 

there's lots of resources on matter.