jQuery wrapメソッドとunwrapメソッドを使用して個別に要素で囲む(削除)する
環境
Windows 10 Home 64bit
jQuery 3.6.3
構文
1.$(セレクター名).wrap(CSSコード)
wrapメソッドで個別に引数の要素で囲みます。
2.$(セレクター名).unwrap.()
unwrapメソッドで指定の要素の親の要素を削除します。
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnchk").click(function() { const cft = $(".pA").text(); if(cft[0] === "黒" ){ $(".pA").wrap("<div class='testCSS'></div>").text("赤"); }else{ $(".pA").unwrap().text("黒"); } }); }); </script> <style> .testCSS{ color:red; } </style> </head> <body> <p class="pA">黒</p> <input type="button" id="btnchk" value="変更"> </body> </html>
結果
「変更」ボタンを押下すると、wrapメソッドで個別にdivタグのクラス「testCSS」を追加します。
再度「変更」ボタンを押下すると、unwrapメソッドで指定の要素(.pA)の親要素を削除し状態に戻ります。