Question

我有三个嵌套＆＃34;框＆＃34; -container：box_1，box_2和box_3。现在我想点击＆＃34; .box_delete＆＃34;来销毁这种盒子的html结构。因此我写了小JQuery脚本。

HTML：

<section class="box_1">
    <div class="box_delete"></div>
    <header class="trigger"><h2 contenteditable="true">TITLE</h2></header>
    <div class="content">
        <div class="editable">
            <p>Level1</p>
        </div>
        <div class="box_2">
            <div class="box_delete"></div>
            <div class="box_rand"></div>
            <div class="content">
                <div class="editable">
                    <p>Level2</p>
                </div>
                <div class="box_3">
                    <div class="box_delete"></div>
                    <div class="content">
                        <div class="editable">
                            <p>Level3-1</p>
                        </div>
                    </div>
                </div>
                <div class="box_3">
                    <div class="box_delete"></div>
                    <div class="content">
                        <div class="editable">
                            <p>Level3-2</p>
                        </div>
                    </div>
                </div>                  
            </div>
        </div>
    </div>
</section>

JS：

$('.box_delete').click(function (e) {
    e.preventDefault();
    $(this).blur();
    var box = $(this).parent().closest("[class*='box_']");
    var aBlocks = $(box).find('.editable').html();
    $(aBlocks).replaceAll(box);
});

这是为了摧毁另一个级别。

但是如果box_delete是＆＃34; box_2＆＃34;正在单击，应删除这两个框（box_3和box_2）。所以在这种情况下，结果应该是：

<section class="box_1">
    <div class="box_delete"></div>
    <header class="trigger"><h2 contenteditable="true">TITLE</h2></header>
    <div class="content">
        <div class="editable">
            <p>Level1</p>
        </div>
        <p>Level2</p>
        <p>Level3-1</p>
        <p>Level3-2</p>
    </div>
</section>

点击第一级框的box_delete，所有子框也应该被破坏。那么内容就是：

TITLE
<p>Level1</p>
<p>Level2</p>
<p>Level3-1</p>
<p>Level3-2</p>

box_1元素中可以有多个box_3元素，box_1元素中可以有多个box_2元素。在这种情况下，应该销毁所有子盒级别。

Answer 1

$('.box_delete').click(function (e) {
    e.preventDefault();
    $(this).blur();
    var box = $(this).parent().closest("[class*='box_']");
    var new = '';
    $(".editable", box).each(function(){ new = new+$(this).html(); });
    $(new).replaceAll(box);
});

Answer 2

这样的东西？

        $('.box_delete').click(function (e) {
            e.preventDefault();
            $(this).blur();
            var box = $(this).parent().closest("[class*='box_']");
            $(".editable p", box).replaceAll(box);
        });

删除嵌套的子元素

2 个答案: