data属性削除

こんなHTMLがあったとしてdata属性を削除したい

<div id="wrapper">
    <p id="target" data-test="TEST" data-user_a_b_c="ABC" data-user_c_d_f="CDF" data-user_g_h_i="GHI" data-user_j_k="JK" data-user_l_m="LM">ターゲット</p>
    <p>
        <button id="dataAttr">removeAttr</button>&nbsp;
        <button id="dataAttrSet">dataset</button>
        <button id="jQ">jQueryで削除</button>
    </p>
</div>

でdata属性を削除できるパターンを試してみた。

var btnRemoveAttr = document.getElementById('dataAttr');
var btnDataset = document.getElementById('dataAttrSet');
var el = document.getElementById('target');

//これだと削除できる
function dataAttrSet(el) {
    if (el.hasAttributes()) {
        var datas = el.dataset;
        if (!!Object.keys(datas).length) {
            for (var i in datas) {
                if (i.indexOf('user_') !== -1) {
                    delete el.dataset[i];
                }
                //el.removeAttribute(i);
                console.log(i, datas[i]);
            }
        }
    }   
}
//これだと削除できない。
function dataAttr(el) {
    
    if (el.hasAttributes()) {
        var attrs = el.attributes,
            len = attrs.length;
        
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (attr.name.indexOf('data-') !== -1) {
                console.log(attr.name);
                el.removeAttribute(attr.name);
            }
        }   
    }
}

btnRemoveAttr.addEventListener('click', function(){
    dataAttr(el);   
}, false);

btnDataset.addEventListener('click', function(e){
    dataAttrSet(el);
}, false);

$(function(){
    
    $('#jQ').click(function(){
        removeHtmlData($(el));
    });
    
    //removeAttrとremoveData両方やればキャッシュも含め削除できる。
    function removeHtmlData($el) {
        console.log($el.data());
        $.each($el.data(), function(key,val) {
            if (key.indexOf('user_') !== -1) {
                $el.removeAttr('data-' + key); //属性を削除
                $el.removeData(key); //cacheも削除
            }
        });
        console.log($el.data());
    }
});

データ周りの理解が浅いので色々混乱する。