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

Question

这段代码有什么问题？我希望当div 加载div"story_L3"中的所有 -p- 标签时删除，留下纯文本。足够简单，但我的代码不起作用，请指教(见示例(

<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() ，直接在文档就绪处理程序中使用.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>