javascript - js删除一个列表内的某一行，同时删除另一个列表内对应索引的行

Question

RT!
当点击列表A中的某一行并执行删除事件，然后删除列表B内的对应的行，我想通过索引的方法实现。
但我在第一次执行删除事件的时候，对应列表内删除的是正确的对应行，但第二次执行事件的时候，列表A和B被删除的行就对应不不上了，好像是列表A索引值，也就是发生点击事件的列表，就算删除了行，他的索引也不会变，但列表B中的索引就会自动减-，我用 自减减 的方法去调试，怎么弄都不行，折腾一天了，实在是找不出问题所在了。希望大神解惑！！！
下面是我写的测试代码

<ul id="list-1">
        <li>我是列表list-1下的 旧内容 不删</li>
        <li>我是列表list-1下的 旧内容 不删</li>
        <li>我是列表list-1下的 旧内容 不删</li>
        <li>我是列表list-2动态添加过来的新内容第 0 条</li>
        <li>我是列表list-2动态添加过来的新内容第 1 条</li>
        <li>我是列表list-2动态添加过来的新内容第 2 条</li>
        <li>我是列表list-2动态添加过来的新内容第 3 条</li>
    </ul>
    <ul id="list-2">
        <li>我是列表list-2下的新内容第 0 条<input type="button" value="删除"></li>
        <li>我是列表list-2下的新内容第 1 条<input type="button" value="删除"></li>
        <li>我是列表list-2下的新内容第 2 条<input type="button" value="删除"></li>
        <li>我是列表list-2下的新内容第 3 条<input type="button" value="删除"></li>
    </ul>
    <script>
        $(function () {
            var x = $('#list-1 li').length;
            var y = $('#list-2 li').length;
            z = x - y;
            index = 0;
            $('#list-2 li').each(function(index) {
                $(this).on('click', function() {
                    $(this).remove();
                    var a = index+z;
                    $('#list-1 li').eq(a).remove();
                    alert(index)
                });
            });
        })
    </script>

Answer 1

雷雷

演示：
https://jsfiddle.net/ycloud/t...

Answer 2

简单的做法是, 为 list01 列表里的每一项添加一个 data-xxx 属性, 点击的时候
查询 list02 里相同 data-xxx 属性的 li, 然后删除.

demo

Answer 3

汗.... 这种问题需要搞一天吗？
each里面的index是初始化的时候就确定了的，是1始终就是1，是2始终就是2，应该使用元素当前的index去删除另外一个列表。
$('#list-2 li').each(function() {

  $(this).on('click', function() {
    $('#list-1 li').eq($(this).index()+z).remove();
     $(this).remove();
  });
});

废话不多说，看代码吧：
http://jsfiddle.net/m6vhks4g/

有空到我的网站逛逛，新站没什么流量：http://www.aizelasi.club/