1

我正在处理一个动态添加和删除内容的列表。但是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>

.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>
4

1 回答 1

0

这是因为 的li项目newwishList也是 jQuery 的选择器的子项，.singleList也被 jQuery 的选择器选中，因为它们没有 of 的类newWish并且被清空。

除了添加类，您还可以使用它：

$(".singleList li:not(.newWish):not([data-theme=a])").remove();

演示用小提琴

你可以使用:not伪类。

于 2013-02-05T10:31:05.897 回答