Javascript .splice（）li项和本地存储存在问题

我有一个简单的购物清单应用程序，你可以动态创建和删除清单项目，并使用localStorage保存它们。这正是我想要的工作方式，但后来我为每个项目添加了一个金额字段，遇到了一些困难。我想我已经基本解决了这些问题，除了删除功能
单击列表项上的bin图标时，它应检查数组中该列表项中文本的索引，然后拼接该数组，这将删除该项。如果列表中有一个项目，或者如果您总是尝试删除最后一个项目，但如果删除列表中的第一个项目，则会拼接错误的列表项目，则此操作有效。我一定是找到了错误的索引，但我不知道我做错了什么。任何帮助都将不胜感激！

javascript

 $(document).on('click', '#enterbutton', function() {
     $.mobile.changePage('#notesPage');
 });



 $(document).on("pagecreate", "#notesPage", function() {

     /*Load local storage items*/
     var items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : items = [];
     var even = [];
     var odd = [];


     console.log(items);
     items.forEach(function(key, value) {
         if (isOdd(value + 1) == 1) {
             even.push(key);
         } else {
             odd.push(key);
         }
     });
     if ((0 < even.length) && (0 < odd.length)) {
         for (i = 0; i < even.length; i++) {
             appendItem(even[i], odd[i]);
         }
     }


     /*Add new item*/
     $('form').on('submit', function(event) {
         event.preventDefault();
         if ($('#newNote').val() == '' || $('#newamount').val() == '') {
             alert('Input can not be left blank');
         } else {
             var item = $('#newNote').val();
             var inum = $('#newamount').val(); //Append this to the arrayItems;        saveToLocalStorage(item, inum);


             //Create the new item and inject to list        appendItem(item, inum);


             $('#mainList').listview('refresh');
             $.mobile.changePage('#notesPage');
         }
     });
     /*Delete item*/
     $(document).on('click', '.bin', function() {
         var item = $(this).closest('li');
         var index = items.indexOf($(item).text());
         items.splice(index, 2);
         console.log(items);
         localStorage.setItem("items", JSON.stringify(items));
         $(item).slideUp();

     });


     /*Check item*/
     $(document).on('click', '.check', function() {
         var item = $(this).closest('li');
         $(item).toggleClass("checked")

     });
     /*Save data to localStorage*/
     function saveToLocalStorage(data, data1) {
         items.push(data, data1);
         console.log(items);
         localStorage.setItem('items', JSON.stringify(items));
     }

     function isOdd(num) {
         return Math.abs(num % 2);
     }

     /*Append item to html*/
     function appendItem(data, data1) {
         $('#mainList').append('<li class="ui-li-static ui-body-inherit ui-first-child ui-last-child">' +
             '<input type="checkbox" class = "check" </input>' +
             '<div type="number" class = "number">' + data1 + '</div>' +
             '<div class="item">' + data + '</div>' +

             '<a href="javascript:undefined;" class="bin">' +
             '<img class="bin" src="Bin.png" ' +
             '</a>' + '</li>');
     }
 });

$（文档）.on（'click'，'enterbutton'，function（）{
$.mobile.changePage（“#notesPage”）；
});
$（document）.on（“pagecreate”，“#notesPage”，function（））{
/*加载本地存储项*/
var items=localStorage.getItem（'items'）？JSON.parse（localStorage.getItem（'items'））：items=[]；
var偶数=[]；
var奇数=[]；
控制台日志（项目）；
items.forEach（功能（键、值）{
if（isOdd（值+1）==1）{
均匀。按（键）；
}否则{
奇数。按（键）；
}
});
if（（0<偶数长度）和&（0<奇数长度））{
对于（i=0；i<偶数长度；i++）{
附录项（偶数[i]，奇数[i]）；
}
}
/*添加新项目*/
$（'form'）。在（'submit'，函数（事件）{
event.preventDefault（）；
如果（$（'#newNote'）.val（）=''| |$（'#newamount'）.val（）=''）{
警报（“输入不能为空”）；
}否则{
var item=$（'#newNote'）.val（）；
var inum=$（'#newamount'）.val（）；//将其附加到arrayItems；saveToLocalStorage（项，inum）；
//创建新项并注入到列表appendItem（项，inum）；
$（'#mainList'）。listview（'refresh'）；
$.mobile.changePage（“#notesPage”）；
}
});
/*删除项目*/
$（文档）.on（'单击'，'.bin'，函数（）{
var item=$（this.closest（'li'）；
var index=items.indexOf（$（item.text（））；
项目.拼接（索引，2）；
控制台日志（项目）；
setItem（“items”，JSON.stringify（items））；
$（项目）.slideUp（）；
});
/*检查项目*/
$（文档）。在（'单击'，'检查'，函数（）上）{
var item=$（this.closest（'li'）；
$（项目）。切换类别（“选中”）
});
/*将数据保存到本地存储*/
函数saveToLocalStorage（数据，数据1）{
项目推送（数据、数据1）；
控制台日志（项目）；
setItem（'items'，JSON.stringify（items））；
}
函数isOdd（num）{
返回Math.abs（数值%2）；
}
/*将项目附加到html*/
函数追加项（数据，数据1）{
$（“#mainList”）.append（“
”+
“当添加m时也发送索引
appendItem（偶数[i]，奇数[i]，i）；
并将索引存储在
.bin
锚定中的数据属性
数据索引中，当删除m时使用该索引删除
var index=$（this）.data（'index'）；

$（文档）.on（'click'，'enterbutton'，function（）{
$.mobile.changePage（“#notesPage”）；
});
$（document）.on（“pagecreate”，“#notesPage”，function（））{
/*加载本地存储项*/
var items=localStorage.getItem（'items'）？JSON.parse（localStorage.getItem（'items'））：items=[]；
var偶数=[]；
var奇数=[]；
控制台日志（项目）；
items.forEach（功能（键、值）{
if（isOdd（值+1）==1）{
均匀。按（键）；
}否则{
奇数。按（键）；
}
});
if（（0<偶数长度）和&（0<奇数长度））{
对于（i=0；i<偶数长度；i++）{
附加项（偶数[i]，奇数[i]，i）；
}
}
/*添加新项目*/
$（'form'）。在（'submit'，函数（事件）{
event.preventDefault（）；
如果（$（'#newNote'）.val（）=''| |$（'#newamount'）.val（）=''）{
警报（“输入不能为空”）；
}否则{
var item=$（'#newNote'）.val（）；
var inum=$（'#newamount'）.val（）；//将其附加到arrayItems；saveToLocalStorage（项，inum）；
//创建新项并注入到列表appendItem（项，inum）；
$（'#mainList'）。listview（'refresh'）；
$.mobile.changePage（“#notesPage”）；
}
});
/*删除项目*/
$（文档）.on（'单击'，'.bin'，函数（）{
var item=$（this.closest（'li'）；
var index=$（this.data（'index'）；
项目.拼接（索引，2）；
控制台日志（项目）；
setItem（“items”，JSON.stringify（items））；
$（项目）.slideUp（）；
});
/*检查项目*/
$（文档）。在（'单击'，'检查'，函数（）上）{
var item=$（this.closest（'li'）；
$（项目）。切换类别（“选中”）
});
/*将数据保存到本地存储*/
函数saveToLocalStorage（数据，数据1）{
项目推送（数据、数据1）；
控制台日志（项目）；
setItem（'items'，JSON.stringify（items））；
}
函数isOdd（num）{
返回Math.abs（数值%2）；
}
/*将项目附加到html*/
函数appendItem（数据、数据1、索引）{
$（“#mainList”）.append（“
”+
'请花点时间正确格式化您的代码。这样您可以更轻松地重新编写代码
     </head> 
<body>
   <div id="firstPage" data-role="page">
      <div class="middle">
         <h1>My List</h1>
         <hr>
         <div data-role="main" class="ui-content">
            <a href="#" id="enterbutton" class="ui-btn ui-btn-inline ui-btn-b ui-corner-all">Let's Shop!</a>
         </div>
      </div>
   </div>
   <div id="notesPage" data-role="page" data-theme="c">
      <div data-role="header" id="hd1">
         <h1>My Shopping List</h1>
         <a href="#addNote" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
      </div>
      <br><br>
      <div role="main">
         <ul data-role="listview" id="mainList" data-inset="true">
         </ul>
      </div>
      <div data-role="footer" data-position="fixed">
      </div>
   </div>
   <div id="addNote" data-role="page" data-dialog="true" data-theme="c">
      <div data-role="header" id="hd3" data-theme="c">
         <h1>New Item</h1>
      </div>
      <div role="main" class="ui-content" id="hd2" data-theme="c">
         <form>
            <input type="text" name="note" id="newNote" placeholder="name...">
            <input type="text" name="amount" id="newamount" placeholder="amount...">
            <input type="submit" value="Add">
         </form>
      </div>
   </div>
</body>
</html>

$(document).on('click', '#enterbutton', function() {
         $.mobile.changePage('#notesPage');
     });



     $(document).on("pagecreate", "#notesPage", function() {

         /*Load local storage items*/
         var items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : items = [];
         var even = [];
         var odd = [];


         console.log(items);
         items.forEach(function(key, value) {
             if (isOdd(value + 1) == 1) {
                 even.push(key);
             } else {
                 odd.push(key);
             }
         });
         if ((0 < even.length) && (0 < odd.length)) {
             for (i = 0; i < even.length; i++) {
                 appendItem(even[i], odd[i],i);
             }
         }


         /*Add new item*/
         $('form').on('submit', function(event) {
             event.preventDefault();
             if ($('#newNote').val() == '' || $('#newamount').val() == '') {
                 alert('Input can not be left blank');
             } else {
                 var item = $('#newNote').val();
                 var inum = $('#newamount').val(); //Append this to the arrayItems;        saveToLocalStorage(item, inum);


                 //Create the new item and inject to list        appendItem(item, inum);


                 $('#mainList').listview('refresh');
                 $.mobile.changePage('#notesPage');
             }
         });
         /*Delete item*/
         $(document).on('click', '.bin', function() {
             var item = $(this).closest('li');
             var index = $(this).data('index');
             items.splice(index, 2);
             console.log(items);
             localStorage.setItem("items", JSON.stringify(items));
             $(item).slideUp();

         });


         /*Check item*/
         $(document).on('click', '.check', function() {
             var item = $(this).closest('li');
             $(item).toggleClass("checked")

         });
         /*Save data to localStorage*/
         function saveToLocalStorage(data, data1) {
             items.push(data, data1);
             console.log(items);
             localStorage.setItem('items', JSON.stringify(items));
         }

         function isOdd(num) {
             return Math.abs(num % 2);
         }

         /*Append item to html*/
         function appendItem(data, data1,index) {
             $('#mainList').append('<li class="ui-li-static ui-body-inherit ui-first-child ui-last-child">' +
                 '<input type="checkbox" class = "check" </input>' +
                 '<div type="number" class = "number">' + data1 + '</div>' +
                 '<div class="item">' + data + '</div>' +

                 '<a href="javascript:undefined;" class="bin">' +
                 '<img class="bin" data-index="'+index+'" src="Bin.png" ' +
                 '</a>' + '</li>');
         }
     });