javascript - js löscht eine bestimmte Zeile in einer Liste und löscht die entsprechende Indexzeile in einer anderen Liste

Question

RT!
Wenn auf eine bestimmte Zeile in Liste A geklickt und ein Löschereignis ausgeführt wird und dann die entsprechende Zeile in Liste B gelöscht wird, möchte ich dies durch die Indexmethode erreichen.
Aber als ich das Löschereignis zum ersten Mal ausführte, wurden die korrekten entsprechenden Zeilen in der entsprechenden Liste gelöscht. Als ich das Ereignis jedoch zum zweiten Mal ausführte, konnten die gelöschten Zeilen in den Listen A und B nicht mehr übereinstimmen Es schien, dass sich der Indexwert der Liste A, also der Liste, in der das Klickereignis auftritt, auch dann nicht ändert, wenn die Zeile gelöscht wird, der Index in Liste B jedoch automatisch verringert wird. Ich verwende die automatische Dekrementierung Methode zum Debuggen, wie man es macht Keine davon funktioniert Nachdem ich einen Tag lang gekämpft habe, kann ich das Problem wirklich nicht finden. Ich hoffe, Gott kann die Verwirrung beseitigen! ! !
Das Folgende ist der Testcode, den ich geschrieben habe

<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

简单的做法是, 为 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/