Question

我正在尝试删除div中的所有内容，但保留一个带有特定类名的段落元素。

<div class="example-container%>
  <p class="element-iwant-to-keep">
    this is the text of the div that i want to keep.
  </p>

  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  some more text inside the main div i dont want to keep.
</div>

到目前为止，我正在尝试以下方法，但无法正常工作。

$(".example-container").each(function(){
    var _noNested = $(this).html();
    var _removedNest = _noNested.replace(/(<p[^>]+?>|<p>|<\/p>)/img, "");   
    $(this).find("element-iwant-to-keep").html(_removedNest).nextAll('p').remove();
});

所以我想删除div中的所有内容，但只保留第一个“p”元素。由于这个场景，我无法清空div，如

$(".example-container").html("");

然后再添加或添加第一个div，在这种情况下，挑战是保留第一个div并删除div中剩下的内容。

感谢您的帮助！

Answer 1

过滤孩子并移除所有兄弟姐妹。
过滤节点类型3以删除文字

＆＃13;

$(".example-container").children().filter(function() {
  if (!$(this).hasClass("element-iwant-to-keep")) {
    $(this).remove()//remove siblings
  }
})
$(".example-container").contents().filter(function() {
  if (this.nodeType == 3) {
    $(this).remove()//remove text
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-container">
  <p class="element-iwant-to-keep">
    this is the text of the div that i want to keep.
  </p>

  <ul>
    <li>more text i dont want to keep</li>
  </ul>
  <ul>
    <li>more text i dont want to keep</li>
  </ul>
  <ul>
    <li>more text i dont want to keep</li>
  </ul>
  some more text inside the main div i dont want to keep.
</div>

＆＃13;

Answer 2

如果 make a copy 您要保留的节点，则可以清除容器的所有内容，然后将副本放回原位。

＆＃13;

let copy = $("div.example-container p.element-iwant-to-keep").clone(true); // Get a copy of the node you want to keep
$("div.example-container").html(copy); // Clear out the container and put in the copy

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-container">
  <p class="element-iwant-to-keep">
    this is the text of the div that i want to keep.
  </p>

  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  some more text inside the main div i dont want to keep.
</div>

＆＃13;

Answer 3

只需将父元素的html设置为您要保留的内容即可。

在下面 - 点击按钮（仅用于此演示目的）我已经抓住了要保留的元素的html，然后用它重置了父元素的html。

$('.resetDiv').click(function(){
  var element=$('.element-iwant-to-keep').html();
  $('.example-container').html(element)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-container">
  <p class="element-iwant-to-keep">
    this is the text of the div that i want to keep.
  </p>

  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  some more text inside the main div i dont want to keep.
</div>
<hr/>
<button type = "button" class="resetDiv">Click me to reset the content of the div</button>

Answer 4

这是一个包含缓存和链接的简洁版本。我们可以使用end()返回到我们链接呼叫中的先前状态。

结束当前链中的最新过滤操作将匹配元素集返回到先前的状态。

＆＃13;

// Store this element in a variable to avoid multiple lookups
$container = $(".example-container");

// Create named functions for clarity
function removeElements() {
  if (!$(this).hasClass("element-iwant-to-keep")) {
    $(this).remove();
  }
}

function removeTextNodes() {
  if (this.nodeType === 3) {
    $(this).remove();
  }
}

$container
  .children()
  .filter(removeElements)
  .end()
  .end()
  .contents()
  .filter(removeTextNodes);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-container">
  <p class="element-iwant-to-keep">
    this is the text of the div that i want to keep.
  </p>

  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  <ul><li>more text i dont want to keep</li></ul>
  some more text inside the main div i dont want to keep.
</div>

＆＃13;

Answer 5

如果你尝试：$（＆＃34; .example-container＆＃34;）。不是（＆＃34; p＆＃34;）。html（＆＃34;＆＃34;）; ？

删除div中的所有内容，但保留具有特定类名的子项

5 个答案: