刪除數據項時，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'));