javascript - 我可以删除并替换特定 DIV 之后的所有内容吗

Question

有没有办法用 javascript/jquery 删除特定 div 之后的所有内容并替换为新代码？

DIV 是动态生成的，我希望能够在之后删除所有内容最后一个 div 看起来像这样:

            <div class="galImage"> **div content** </div>
            /**delete everything after this point and replace with code below**/
        </div>
    </body>
</html>

我试过 $('.galImage').nextAll().remove(); 我在 stackoverflow 的其他地方找到了它，但它似乎没有任何效果 - 是 nextAll() 甚至是一个合法的函数？

Answer 1

您的问题有点不清楚，因为您发布的内容似乎是标记片段。

据我所知，您想删除一个 textNode。选择器和大多数 jQuery 遍历方法无法找到文本节点，但您可以使用 native API 选择它。

var galimg = $('.galImage')[0];  // <-- get the DOM element

    // traverse to its parent, and remove the node that is after the galImage
galimg.parentNode.removeChild( galimg.nextSibling );

---

如果有额外的节点要删除，那么你可以使用循环:

var galimg = $('.galImage')[0];
var node;

while( node = galimg.nextSibling ) {
    node.parentNode.removeChild( node );
}

---

考虑到你正在使用 jQuery，如果确实有实际元素(不仅仅是文本节点)要删除，你应该使用 .remove()，否则 jQuery 的缓存将不会更新，这可能会导致内存泄漏。

var galimg = $('.galImage')[0];
var node;

while( node = galimg.nextSibling ) {
    $(node).remove();
}

---

或者如果你想要一个完整的 jQuery 解决方案，你可以这样做:

var galimg = $('.galImage');
var nodes = galimg.parent().contents(); // <-- .contents() includes text nodes
var idx = nodes.index( galimg );   // <-- get the index of galImage

nodes.slice( idx + 1 ).remove();  // <-- take a slice of the nodes, starting at
                                  //       the index after the galImage