javascript - js supprime une certaine ligne dans une liste et supprime la ligne d'index correspondante dans une autre liste

Question

RT !
Lorsque l'on clique sur une certaine ligne de la liste A et qu'un événement de suppression est exécuté, puis que la ligne correspondante de la liste B est supprimée, je souhaite y parvenir via la méthode d'indexation.
Mais lorsque j'ai exécuté l'événement de suppression pour la première fois, les lignes correspondantes correctes ont été supprimées dans la liste correspondante. Cependant, lorsque j'ai exécuté l'événement pour la deuxième fois, les lignes supprimées des listes A et B ne pouvaient plus correspondre. Il semblait que la valeur d'index de la liste A est la liste dans laquelle l'événement de clic se produit. Même si la ligne est supprimée, son index ne changera pas, mais l'index de la liste B diminuera automatiquement - j'utilise la méthode de décrémentation automatique pour déboguer. .Comment faire ? Aucun d'entre eux ne fonctionne. Après une journée de lutte, je n'arrive vraiment pas à trouver le problème. J'espère que Dieu pourra dissiper la confusion ! ! !
Voici le code de test que j'ai écrit

<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()
    });
})

démo :
https://jsfiddle.net/ycloud/t...

Answer 2

Le moyen le plus simple consiste à ajouter un attribut data-xxx à chaque élément de la liste list01,
interrogez le li avec le même attribut data-xxx dans la liste02, puis supprimez-le.

démo

Answer 3

Sueur...Est-ce que ce genre de problème prend une journée ?
L'index de chacun est déterminé lors de l'initialisation. S'il est 1, il sera toujours 1, s'il est 2, il sera toujours 2. L'index actuel de l'élément doit être utilisé pour supprimer une autre liste.
$('#list-2 li').each(function() {

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

Sans plus attendre, regardons le code :
http://jsfiddle.net/m6vhks4g/

Allez sur mon site web quand vous avez le temps. Le nouveau site web n'a pas beaucoup de trafic : http://www.aizelasi.club/