Question

我正在使用我添加的列表并从dynamiclly中删除内容。但是，一个li子项应保留，因为它包含一个表单以将子项添加到其父项。我的问题是，在列表中调用empty()也会清除表单子项。我已经尝试在表单子类上使用:not：这种工作，实际li项仍然存在，但所有表单html都被删除了。

的JavaScript

$('.singleList li:not(.newWish)').empty();
// Alternate version (same result)
$('.singleList li:not(.newWish):not(.newwishList)').empty();

HTML

<div class="singleListWrapper" style="display: none;">
    <ul data-role="listview" data-inset="true" data-theme="a" data-divider-theme="a"
    class="singleList">
        <!-- Other children will be dynamically added here -->
        <!-- Everything from here .... -->
        <li class="newWish">
            <div data-role="collapsible" data-theme="b" data-content-theme="c">
                    <h2>Legg til ønske</h2>

                <ul data-role="listview" class="newwishList">
                    <li data-role="fieldcontain" data-theme="a">
                        <label for="name">Ønskets navn:</label>
                        <input type="text" name="name" id="name" class="newWishName"
                        value="" />
                    </li>
                    <li data-role="fieldcontain" data-theme="a">
                        <label for="slider">Antall:</label>
                        <input type="range" name="slider" id="slider" data-theme="a"
                        class="newWishAmount" value="0" min="0" max="100" />
                    </li>
                    <li data-role="fieldcontain" data-theme="a">
                        <label for="price">Pris:</label>
                        <input type="text" name="name" id="price" class="newWishPrice"
                        value="" />
                    </li>
                </ul>
            </div>
        </li>
        <!-- ... To here should remain after empty() -->
    </ul>
</div>

HTML .empty（）

之后的HTML

（抱歉由于所有jQm添加的类而导致格式错误。重要的是事情是结构）

<li class="newWish ui-li ui-li-static ui-btn-up-a ui-last-child">
    <div data-role="collapsible" data-theme="b" data-content-theme="c" class="ui-collapsible  ui-collapsible-inset ui-corner-all ui-collapsible-themed-content">
        <h2 class="ui-collapsible-heading ui-li-heading"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-left ui-btn-up-b" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="b" data-mini="false"><span class="ui-btn-inner"><span class="ui-btn-text">Legg til ønske<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span></span></a></h2>
        <div class="ui-collapsible-content ui-body-c" aria-hidden="false">
            <ul data-role="listview" class="newwishList ui-listview">
                <li data-role="fieldcontain" data-theme="a" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-a ui-first-child"></li>
                <li data-role="fieldcontain" data-theme="a" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-a"></li>
                <li data-role="fieldcontain" data-theme="a" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-a ui-last-child"></li>
            </ul>
        </div>
    </div>
</li>

Answer 1

这是因为li的{{1}}项也是newwishList的子项，并且也是由jQuery的选择器选择的，因为它们没有.singleList的类和被清空了。

除了添加课程，您还可以使用：

newWish

Fiddle for Demonstration

你可以使用$(".singleList li:not(.newWish):not([data-theme=a])").remove(); psuedo class。

除特定孩子外的清单

1 个答案: