1

動的にコンテンツを追加および削除するリストを使用しています。ただしli、親に子を追加するためのフォームが含まれているため、1つの子を残す必要があります。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子でもあり.singleList、jQuery のセレクターによっても選択されるためです。これらのアイテムにはクラスがなく、newWish空になっているためです。

クラスを追加する代わりに、これを使用することもできます:

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

デモ用フィドル

:notまた、擬似クラスを使用できます。

于 2013-02-05T10:31:05.897 に答える