javascript - js deletes a certain row in one list and deletes the corresponding index row in another list

Question

RT!
When a certain row in list A is clicked and a delete event is executed, and then the corresponding row in list B is deleted, I want to achieve this through the index method.
But when I executed the deletion event for the first time, the correct corresponding rows were deleted in the corresponding list. However, when I executed the event for the second time, the deleted rows in lists A and B no longer corresponded. It seems to be the index value of list A, which is the list where the click event occurred. Even if the row is deleted, its index will not change, but the index in list B will automatically decrease -. I used the self-decrement method to debug. No matter what I do, it doesn't work. After struggling for a day, I really can't find the problem. I hope God can clear up the confusion! ! !
The following is the test code I wrote

<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

$(function() {
  var $list1 = $('#list-1');
  var $list2 = $('#list-2');
  var z = $list1.find('li').length - $list2.find('li').length;
  $list2.on('click',
    'li',
    function() {
        var index = $(this).index()
      console.log(index)
      $(this).remove();
      $list1.find('li:eq('+ (index + z) +')').remove()
    });
})

demo:
https://jsfiddle.net/ycloud/t...

Answer 2

The simple way is to add a data-xxx attribute to each item in the list01 list. When clicked,
query the li with the same data-xxx attribute in list02, and then delete it.

demo

Answer 3

Sweat...Does this kind of problem take a day?
The index in each is determined during initialization. If it is 1, it will always be 1, if it is 2, it will always be 2. The current index of the element should be used to delete another list.
$('#list-2 li').each(function() {

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

Without further ado, let’s look at the code:
http://jsfiddle.net/m6vhks4g/

Go to my website when you have time. The new website doesn’t have much traffic: http://www.aizelasi.club/