Question

我有一个项目列表

<ul>
    <li>
        <ul class="remove">
            <li>1</li>
        </ul> <--Remove
        <ul>
            <li>2</li>
        </ul> <--Remove
        <ul>
            <li>3</li>
        </ul> // .remove ul ends here 
    </li>
</ul>

有没有办法删除我在课程.remove之后显示箭头的所有结束标记？

Answer 1

jQuery适用于有效的DOM，因此您不能只删除结束标记。在JavaScript的帮助下，您可以删除结束标记，但只能删除字符串变量：

var ul = $('ul.remove').siblings('ul');
var removed = "";
for (var i = 0; i < ul.length; i++) {
  removed += ul[i].outerHTML.substring(0, ul[i].outerHTML.length - 5);
}


alert(removed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <ul class="remove">
      <li>1</li>
    </ul>
    <ul>
      <li>2</li>
    </ul>
    <ul>
      <li>3</li>
    </ul>
  </li>
</ul>

我不知道将它放回DOM的好方法，因为一旦你这样做，浏览器将通过添加那些结束标记来生成有效的HTML。我能想到的唯一错误方式是将字符串变量直接保存到文件中（以及HTML的其余部分），但显然无法从网站完成，可能不是您想要的

但是为什么要删除结束标签呢？如果您想将ul实际上与“删除”类合并到第一个，那么您可以按照Parvan的回答，但我发现下面的代码更容易理解并且可能更快一些：

var remove = $('ul.remove');
var siblings = remove.siblings('ul');
remove.append(siblings.children());
siblings.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <ul class="remove">
      <li>1</li>
    </ul>
    <ul>
      <li>2</li>
    </ul>
    <ul>
      <li>3</li>
    </ul>
  </li>
</ul>

某些元素后删除元素

1 个答案: