Javascript

1. $('.jq-sample1 :button').on('click', function(){
2.     $('.jq-sample1 p')
3.     .replaceWith('<div>replaceAll</div>')
4.     .appendTo('.jq-sample1 .display');
5. });

HTML

1.  
2. <div class="jq-sample1">
3.     <button class="cq-btn m-primary">execute</button>
4.  
5.     <p>C#</p>
6.     <p>PHP</p>
7.     <p>Javascript</p>
8.     <p>Perl</p>
9.     <p>Ruby</p>
10.     <p>Java</p>
11.  
12.     <h5 class="headline-output">削除された要素</h5>
13.     <div class="display"></div>
14. </div>
15.  

Javascript

1. $('.jq-sample2 :button').on('click', function(){
2.     $('.jq-sample2 p')
3.     .replaceWith(function (){
4.         // this は 置換される DOMエレメント
5.         return $('<div>', {text: $(this).attr('class')});
6.     })
7.     .appendTo('.jq-sample2 .display');
8. });

HTML

1.  
2. <div class="jq-sample2">
3.     <button class="cq-btn m-primary">execute</button>
4.  
5.     <p class="a">C#</p>
6.     <p class="b">PHP</p>
7.     <p class="c">Javascript</p>
8.     <p class="d">Perl</p>
9.     <p class="e">Ruby</p>
10.     <p class="f">Java</p>
11.  
12.     <h5 class="headline-output">削除された要素</h5>
13.     <div class="display"></div>
14. </div>
15.