使用jQuery创建DOM元素时为何会添加空style属性？

我之前也碰到过jQuery动画留下样式痕迹导致字符串匹配失败的坑，刚好能帮你梳理清楚问题根源和解决办法：

问题现象 #

你通过jQuery动态添加任务列表项时，预期生成的HTML是：

<li><span class="text-task">用户输入内容</span><span class="delete-task">x</span></li>

但实际DOM中生成的元素却多了一个空的style=""属性：

<li style=""><span class="text-task">用户输入内容</span><span class="delete-task">x</span></li>

这个看似无关紧要的空属性，直接导致删除元素时，用this.parentElement.outerHTML匹配数组中存储的字符串时找不到对应索引——因为数组里存的是不带style的版本，两者字符串完全不匹配。

原代码的问题根源 #

你的添加元素函数中，使用了hide().fadeIn(250)实现淡入动画：

function addNewTask(input) { 
  let userInput; 
  userInput = input; 
  let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>'; 
  $('.task-list').append(task).children(':last').hide().fadeIn(250); 
  arr.push(task); 
  localStorage.setItem('items', JSON.stringify(arr)); 
  console.log(arr); 
}

这里的hide()方法会给元素添加style="display: none;"，而fadeIn()动画结束后，jQuery只会修改style中的display属性（比如改成display: list-item;），并不会自动移除整个style属性。如果动画结束后style属性变为空值，就会导致DOM元素的outerHTML和数组中存储的task字符串不一致。

解决办法 #

在fadeIn()的回调函数中，等动画完全结束后手动移除元素的style属性，让DOM元素的outerHTML和数组中的字符串保持一致：

修改后的addNewTask函数：

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); 
  $('.task-list').append(task).children(':last').hide().fadeIn(250, function() { 
    $(this).removeAttr('style'); // 动画结束后移除style属性
    localStorage.setItem('items', JSON.stringify(arr)); 
    console.log(arr); 
  }); 
}

这样修改后，动画完成的<li>元素就没有style属性了，和数组中存储的task字符串完全匹配，删除时用outerHTML查找索引就能正常工作。

额外优化建议 #

其实更健壮的方式可以不用依赖outerHTML字符串匹配：比如给每个任务元素添加自定义属性（如data-index）存储它在数组中的索引，删除时直接读取这个属性值，彻底避免HTML字符串不一致的问题。不过你当前的解决方法已经能有效解决问题，完全可以正常使用。

内容的提问来源于stack exchange，提问作者SirJimiee