Javascript

1. var code1_span = $('#code-sample1 span');
2. $('#code1-execute').on('click', function (e) {
3.     if (code1_span.parent().is('p')) {
4.         code1_span.unwrap();
5.     } else {
6.         code1_span.wrap('<p></p>');
7.     }
8. });

HTML

1. <span class="cq-btn m-primary" id="code1-execute">実行</span>
2. <br><br>
3. <div id="code-sample1">
4.     <span>test1</span>
5.     <span>test2</span>
6.     <span>test3</span>
7. </div>

CSS

1. #code-sample1 span {
2.     display: inline-block;
3.     padding: 4px;
4.     background: #DD2266;
5.     color: #FFFFFF;
6. }
7.  
8. #code-sample1 p {
9.     margin-top: 4px;
10.     border: 2px dotted #456f9a;
11. }