删除数据项时，HTML不变

Question

我正在尝试为第二个option （其中value="24" ）将data-title值设置为空字符串。 尽管console.log语句说data-title现在为空，但是当我在浏览器上检查元素时，文本仍然存在。 有没有办法在浏览器中动态更改HTML？

HTML：

<select name="ctl00$phBody$ddlTimeScale" id="ctl00_phBody_ddlTimeScale" class="timeline_options" data-list-items-tooltip-enabled="true">
    <option value="1">1 Hour</option>
    <option value="24" data-title="text 24">1 Day</option>
    <option selected="selected" value="144" data-title="text 144">1 Week</option>
</select>

jQuery的/ JavaScript的：

var selectID = "ctl00_phBody_ddlTimeScale";

console.log("Before 24: " + $('#' + selectID + ' option[value="24"]').data('title'));

$('#' + selectID + ' option[value="24"]').data('title', '');

console.log("After 24: " + $('#' + selectID + ' option[value="24"]').data('title'));

的jsfiddle

Answer 1

除此之外，您可以使用.attr（）将数据标题设置为空值。

$('#' + selectID + ' option[value="24"]').attr('data-title', '');

Answer 2

JSFIDDLE演示-> http://jsfiddle.net/sp03musf/1/

.data（）在与属性data-attr不同的匹配元素上存储数据， .removeData从存储中删除数据属性。

因此，基本上，当您要删除该属性时， .data('title')仍然是完整的，因为它来自客户端存储。 使用.removeData()可以删除它。

var selectId = $('#' + selectID + ' option[value="24"]');
selectId.attr('data-title', ''); // empty it in the DOM
selectId.removeData('title'); // clear storage

注意：

如果您不打算使用localStorage，则完全不要写入data('title') 。 只需每次使用.attr(data-title) ，因此您不必removeData() 。

console.log("Before 24: " + $('#' + selectID + ' option[value="24"]').attr('data-title'));
$('#' + selectID + ' option[value="24"]').attr('data-title', '1');
console.log("After 24: " + $('#' + selectID + ' option[value="24"]').attr('data-title'));