当 div 加载时剥离 div 内的所有 p 标签

Question

这段代码有什么问题？ 我想要这样，当 div 加载 div 中的所有 -p- 标签时 "story_L3" 被删除，留下纯文本 。很简单，但我的代码不起作用，请指教（见示例）

<div id="story_L3">
  <p class="one">This is a paragraph inside a p element.</p>
  <p class="two">This is a paragraph inside another p element.</p>
</div>


.one{background-color: yellow;}
.two{background-color: pink;}


$('#story_L3').load(function(){
    $('#story_L3').find('p').contents().unwrap(); 
});

我也试过：

$('#story_L3').load(function(){
    ($('#story_L3 > p').contents().unwrap(); 
});

和：

$('#story_L3').load(function(){
      if($('#story_L3').find('p').length !== 0){
          $('p').contents().unwrap();     
        }
     });

Answer 1

不需要使用.load()，直接使用document-readyhandler中的.unwrap()代码

$('#story_L3 p').contents().unwrap();

.one {
  background-color: yellow;
}

.two {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="story_L3">
  <p class="one">This is a paragraph inside a p element.</p>
  <p class="two">This is a paragraph inside another p element.</p>
</div>

Answer 2

试试这个：

$(document).ready(function () {
                $("#story_L3 > p").contents().unwrap();
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="story_L3">
        <p class="one">This is a paragraph inside a p element.</p>
        <p class="two">This is a paragraph inside another p element.</p>
    </div>

当 div 加载时剥离 div 内的所有 p 标签

Stripping off all p tags inside a div when the div loads

jquery

unwrap