删除数据项时，HTML不变

Question

I'm trying to make the data-title value empty strings for the second option (where value="24" ). Although the console.log statements say the data-title is now empty, when I inspect the element on my browser, the text is still there. Is there a way to dynamically change the HTML on the browser?

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 DEMO -> http://jsfiddle.net/sp03musf/1/

.data() stores data on the matched elements which is different from the attributes data-attr and .removeData removes the data attribute from the storage.

So, basically when you want to remove the attribute, the .data('title') will still be intact since it comes from the client side storage. Use .removeData() to remove that too.

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

Note:

If you don't intend to use localStorage, don't write data('title') at all. Just use .attr(data-title) every single time, so you don't have to 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'));