Question

<fieldset>
    <legend>Export Model</legend>
    <label for="Name">Name</label>
    <input id="name" name="name" type="text" value="">
    <br>
    <button onclick="addCategory(this)" type="button">Add Category</button>
    <fieldset>
        <legend>Category
            <button class="del-but" type="button">Remove</button></legend>
        <label for="Name">Name</label><input id="name" name="name" type="text" value=""><br>
        <button class="add-cat-but" onclick="addCategory(this)" type="button">Add SubCategory</button>
        <button class="add-chart-but" onclick="addChart(this)" type="button">Add Chart</button>
    </fieldset>
</fieldset>

我有一些字段集，我想在彼此内部添加更多内容来构建元素树。我的问题是＆＃34;类别＆＃34; fieldset只能有另一个类别或图表。

所以我要做的就是删除＆＃34;添加图表＆＃34;按下按钮＆＃34;添加类别＆＃34;。按钮在字段集内处于同一级别，但无法弄清楚如何在那里停止搜索（它从较低级别删除按钮）。

有人可以帮助我吗？

脚本：

function addCategory（btn）{

        var $addCategory = "<fieldset>";
        $addCategory += "<legend>Category " + removeButton + "</legend>";
        $addCategory += '@Html.Label("Name")';
        $addCategory += '@Html.TextBox("name")';
        $addCategory += "<br />";
        $addCategory += addCategoryButton;
        $addCategory += addChartButton;
        $addCategory += "</fieldset>";
        $(btn).parent().children().find(".add-chart-but").remove();
        $(btn).parent().append($addCategory);
        $(document).on("click", ".del-but", remove);

    }

    function addChart(btn) {
        var $addChart = "<fieldset>";
        $addChart += "<legend>Chart " + removeButton + "</legend>";
        $addChart += '@Html.Label("Name")';
        $addChart += '@Html.TextBox("name")';
        $addChart += "<br />";
        $addChart += addSerieButton;
        $addChart += addDetailButton;
        $addChart += "</fieldset>";
        $(btn).parent().append($addChart);
        $(document).on("click", ".del-but", remove);
    }

    function remove() {
        $(this).parent().parent().remove();
    }

找到解决方案：

替换：

$(btn).parent().children().find(".add-chart-but").remove();

使用：

$(btn).siblings(".add-chart-but").remove();

Answer 1

只需将find()选择器插入children()：

$(btn).parent().children().find(".add-chart-but").remove();

更改为

$(btn).parent().children(".add-chart-but").remove();

Answer 2

您是否尝试过使用.closest()？它遍历DOM树。它也应该有用。

Answer 3

您可以使用next删除相邻的按钮

$(btn).next(".add-chart-but").remove();

直接从API文档

获取集合中每个元素的紧随其后的兄弟匹配的元素

如何仅选择同一级别的元素

3 个答案: