Xóa thuộc tính dữ liệu khỏi HTML bằng cách sử dụng jQuery

Question

Có vẻ như không thể làm cho thuộc tính này hoạt động ...

Tôi có một trang ẩn một số liên kết nhất định. Khi DOM được tải, tôi đang sử dụng jQuery để chuyển đổi một số thành phần đó. Đây được điều khiển bằng cách sử dụng một thuộc tính dữ liệu như vậy:

<div class="d_btn" data-usr='48'> 
    <div class="hidden_button"> 

Sau đó, tôi có mã:

$.each($(".d_btn"), function() { 
    var btn = $(this).data('usr'); 
    if (btn == '48'){  
    $(this).children('.hidden_button').toggle(); 
    } 

ở trên tất cả các công trình theo kế hoạch. Vấn đề là tôi đang cố gắng loại bỏ data-usr khỏi lớp .d_btn khi câu lệnh if được đánh giá. Tôi đã thử những điều sau đây và không có gì làm việc (ví dụ, sau khi trang web được tải, nguồn vẫn thể hiện những thuộc tính dữ liệu usr:

$(this).removeAttr("data-usr"); 

$(this).removeData("usr"); 

Tôi đã làm việc về vấn đề này cho một vài giờ ngay bây giờ và. ..nothing! Help được đánh giá rất nhiều!

CẬP NHẬT

tôi đã thử những gợi ý tuyệt vời của thiết lập các thuộc tính dữ liệu vào một chuỗi rỗng nhưng tôi vẫn không nhận được kết quả mong muốn.

Tới giải thích thêm một chút, Lý do tôi đang cố gắng loại bỏ thuộc tính là như vậy khi một phản ứng ajax thêm một mục khác vào trang, các mục đã thêm trước đó sẽ có nút được hiển thị hoặc ẩn. Khi trả lời AJAX, tôi gọi hàm giống nhau khi DOM được tải.

Hiện nay, khi một cái gì đó được bổ sung thông qua AJAX, nó Toggles tất cả các nút (hiển thị những người mà đã được ẩn đi và ngược lại.) Ugh ...

Tôi cũng hoàn toàn sẵn sàng thử thay thế cho phương pháp của tôi . Cảm ơn!

CẬP NHẬT

Vâng, bóng đèn chỉ lóe lên và tôi có thể làm những gì tôi muốn làm bằng cách chỉ sử dụng .show() thay vì .toggle()

Dù sao, Tôi vẫn muốn tìm câu trả lời cho câu hỏi này bởi vì trang sẽ có khả năng kiểm tra hàng trăm mục bất cứ khi nào có gì đó được thêm vào - điều này có vẻ không hiệu quả khủng khiếp (ngay cả đối với máy tính, hahaha.)

Answer 1

Thay đổi DOM không ảnh hưởng đến nguồn. Nó ảnh hưởng đến DOM, mà bạn có thể xem bằng Thanh tra/Công cụ dành cho nhà phát triển. Nhấp chuột phải => Xem nguồn sẽ cung cấp cho bạn nguồn gốc của trang, chứ không phải nguồn hiện tại thực như được sửa đổi bởi JavaScript.

Answer 2

Tại sao bạn không đặt giá trị cho một giá trị ngẫu nhiên hoặc vari trống có thể thay thế nếu removeAttr không hoạt động ..

$(this).attr("data-usr" , ''); 

$(this).prop("data-usr" , ''); 

Answer 3

Set nó vào một chuỗi trống:

$(this).attr("data-usr", ""); 

Tôi thứ hai gì Kolink nói: kiểm tra DOM, không phải là nguồn. (Chrome: Ctrl + Shift + i).

Answer 4

Như những người khác đã nêu. Việc kiểm tra nguồn sẽ chỉ hiển thị nguồn chưa được chỉnh sửa ban đầu cho trang web. Những gì bạn cần làm là kiểm tra DOM bằng cách sử dụng các công cụ phát triển.

Tôi vừa kiểm tra mọi thứ trong thanh tra của Chrome trên jsfiddle here và thuộc tính chắc chắn đang bị xóa cũng như dữ liệu.