Почему при создании новых элементов DOM через jQuery к ним добавляются пустые атрибуты стиля?

Question

Я создаю и добавляю <li> элементы в DOM через jQuery всякий раз, когда пользователь нажимает определенную кнопку.Однако после их добавления в DOM они отображаются как <li style=""></li> по сравнению с <li></li>.Почему это происходит?

Я понимаю, что визуально это не вызывает проблем.Однако это вызывает проблему при попытке найти индекс определенного элемента в массиве.

Функция, которая добавляет элемент <li>:

function addNewTask(input) {
  let userInput;

  userInput = input;

  let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>';

  //parent = $('.task-list');
  $('.task-list').append(task).children(':last').hide().fadeIn(250);
  arr.push(task);
  localStorage.setItem('items', JSON.stringify(arr));
  console.log(arr);
}

Функция, которая пытается найти индекс массиваэлемента DOM (в настоящее время не работает должным образом - он не может найти индекс по указанному значению):

$(document).ready(function () {
    $(document).on('click', '.delete-task', function () { // We use 'on' as the element is dynamically added
        console.log("'Delete' button pressed");
        var $self = $(this);


        var index = this.parentElement.outerHTML;

        var findIndex = arr.indexOf(index);

        arr.splice(findIndex, 1);

        $self.parent().fadeOut(250, function() {
            console.log($self.parent().html());

            $self.remove(); // Dynamically remove the DOM element from the list
            localStorage.setItem('items', JSON.stringify(arr));


            console.log(localStorage.getItem('items'));

        });
    });
});  

Ожидаемый вывод HTML:

<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>

Фактический вывод HTML:

<li style=""><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>

Обновление (проблема решена!): Мне удалось решить проблему, удалив атрибут style после завершения выполнения методов .hide() и .fadeIn() jQuery.

Модифицированный код:

function addNewTask(input) {
    let userInput;

    userInput = input;

    let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>';
    arr.push(task);

    //parent = $('.task-list');
    $('.task-list').append(task).children(':last').hide().fadeIn(250, function() {
        console.log(this);
        $(this).removeAttr('style');

        localStorage.setItem('items', JSON.stringify(arr));
        console.log(arr);
    });

}

Answer 1

Это вызвано тем, что вы используете hide().fadeIn(250).Эти методы устанавливают встроенные правила display и opacity CSS для затронутого элемента.После завершения перехода правила удаляются, но остается пустой атрибут style.

Это можно увидеть в следующем фрагменте кода, если вы проверите существующий элемент li, прежде чем нажать кнопку, чтобы добавить новыйli:

function addNewTask(input) {
  let task = '<li><span class="text-task">' + input + '</span><span class="delete-task">x</span></li>';
  $('.task-list').append(task).children(':last').hide().fadeIn(250);
}

$('button').click(function() {
  addNewTask('foobar');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="task-list">
  <li>Foo</li>
</ul>

<button>Add</button>

Если вы хотите удалить потерянный атрибут style (даже если он не причиняет вреда), вы можете вызвать removeAttr() в обратном вызове fadeIn():

function addNewTask(input) {
  let task = '<li><span class="text-task">' + input + '</span><span class="delete-task">x</span></li>';
  $('.task-list').append(task).children(':last').hide().fadeIn(250, function() {
    $(this).removeAttr('style');
  });
}

$('button').click(function() {
  addNewTask('foobar');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="task-list">
  <li>Foo</li>
</ul>

<button>Add</button>