通过 jQuery 创建新的 DOM 元素时，为什么要添加空的 Style 属性？

Question

每当用户单击特定按钮时，我都会通过 jQuery 创建 <li> 元素并将其附加到 DOM。但是，一旦将它们添加到 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>

更新（问题已解决！）： 在 .hide() 和 .fadeIn() jQuery 方法执行完毕后，我可以通过删除 style 属性来解决问题。

修改代码：

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 元素，则可以在下面的sn-p 中看到这种情况：

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 属性（即使它没有害处），您可以在fadeIn() 的回调中调用removeAttr()：

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>