【javascript】PCのみ電話リンクのaタグを削除する

2019/09/24

SPではaタグを電話リンク<a href="tel:">にして、電話発信ボタンを作成することができますが、電話リンクはSPのみあれば良いので、PCでは不要です。
なのでPCではそのaタグを削除します。

HTML

<p><a href="tel:0000000000" class="is-tel"><span>電話番号 000-0000-0000</span></a></p>

1	<p><a href="tel:0000000000" class="is-tel"><span>電話番号 000-0000-0000</span></a></p>

javascript

var ua = navigator.userAgent;
if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
	function unwrap(elm){
		while(elm.firstChild) {
		elm.parentNode.insertBefore(elm.firstChild, elm);
		}
		elm.remove();
	}

	var telElements = document.getElementsByClassName('is-tel');
	for (var i = 0; i < telElements.length; i++) {
		unwrap(telElements[i]);
	}
}

var ua = navigator.userAgent;

if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){

function unwrap(elm){

while(elm.firstChild) {

elm.parentNode.insertBefore(elm.firstChild, elm);

}

elm.remove();

}

var telElements = document.getElementsByClassName('is-tel');

for (var i = 0; i < telElements.length; i++) {

unwrap(telElements[i]);

}

jQuery

var ua = navigator.userAgent;
if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
	$('.is-tel').each(function(){
		$(this).unwrap();
	});
}

var ua = navigator.userAgent;

if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){

$('.is-tel').each(function(){

$(this).unwrap();

});

}

削除したい要素にclass『is-tel』を付けると、
自身の要素を削除し、子要素は残します。

生のjavascriptで、jQueryのunwrap()を実現しています。
unwrapは他の用途にも使えますので是非ご利用ください。

【javascript】PCのみ電話リンクのaタグを削除する

HTML

javascript

jQuery

シェアする