Question

我正在尝试保存DIV id：#canvas中包含的html。在通过ajax将其发送到服务器之前，使用类.show-hide-config和.ez-control删除所有元素。这是我到目前为止所做的，但它还远未奏效。

$(".ez-save-page").click(function(){
    var canvas_html = $("#canvas").html();
    canvas_html = $(canvas_html).find(".show-hide-config, .ez-control").remove();
    $.ajax({
        dataType: "json",
        url: "./save_page/",
        data: {"save_html": JSON.stringify(canvas_html)},
        success: function(save_result){
            console.log(save_result);
        }
    });
});

示例html：

<div id="el-1387177861244" class="ui-draggable">
    <button class="show-hide-config">×</button>
    <div class="ez-control">
        <span>Container</span>
        <div class="config_options">
            <div class="btn-group">
                <button type="button" class="close">×</button>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div>
        <p>Some content I want to keep including the wrapping div</p>
    </div>
</div>

我想发送的内容：

<div id="el-1387177861244" class="ui-draggable">
    <div>
        <p>Some content I want to keep including the wrapping div</p>
    </div>
</div>

实际的html很复杂，内部可以包含任意数量的元素，但是如果我可以从选择器中删除2个类而不修改DOM，那将非常感激。

Answer 1

您可以克隆#canvas的内容，按照您想要的方式操作它们并获取生成的HTML。修改后的代码：

var canvas_html = $("#canvas")
    .children()                             // grab .children
    .clone()                                // and .clone
    .find(".show-hide-config, .ez-control") // .find unwanted elements
    .remove()                               // .remove them
    .end()                                  // undo the last .find operation
    .html();                                // grab .html contents
console.log($.trim(canvas_html));
// <div>
//     <p>Some content I want to keep including the wrapping div</p>
// </div>

Answer 2

试试这个

$("#canvas").find(".show-hide-config, .ez-control").remove();

而不是

canvas_html = $(canvas_html).find(".show-hide-config, .ez-control").remove();

尝试从选择器中删除html元素而不修改DOM

2 个答案: