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

Question

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

更新（问题已解决！）：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);
    });

}

标签： javascriptjqueryhtmlcssgoogle-chrome-devtools

Answer 1

这是由于您使用hide().fadeIn(250). 这些方法在受影响的元素上设置内联display和CSS 规则。opacity转换完成后，规则将被删除，但空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>