CODEWITHSUNDEEP
javascriptjqueryhtmldom
xkcd
xkcd

Reputation: 2590

Removing consecutive children of ul tag

Here is the html piece that I want to manipulate:

<ul>
    <li data-action="CRMEVENTSTREAM" data-parameters="" data-id="3084314321" class="action"><span data-i18n="ui.EVENT_STREAM">Event Stream</span></li>
    <li data-action="APPCALENDARVIEW" data-parameters="" data-id="3084314323" class="action"><span data-i18n="ui.CALENDAR">Calendar</span></li>
    <li data-action="CRMCUSTOMERSVIEW" data-parameters="" data-id="3084314324" class="action"><span data-i18n="ui.CUSTOMERS">Customers</span></li>
    <li data-action="PROFILEEDITDLG" data-parameters="DM_CC" data-id="3084314325" class="action"><span data-i18n="ui.PROFILE_EDITOR">Profile Editor</span></li>
    <li class="k-separator"></li>
    <li data-action="VIEWCASHMOVEMENT" data-parameters="" data-id="3084314327" class="action"><span data-i18n="ui.CASH_MOVEMENT">Cash Movement</span></li>
    <li data-action="CRMAPPLICATIONLIST" data-parameters="" data-id="3084314328" class="action"><span data-i18n="ui.APPLICATION_LIST">Application List</span></li>
    <li class="k-separator"></li>
    <li data-action="CRMRELATIONEDITOR" data-parameters="" data-id="2998116122" class="action"><span data-i18n="ui.CUSTOMER_RELATION_EDITOR">Customer Relation Editor</span></li>
    <li data-action="CRMMULTIRELEDITOR" data-parameters="" data-id="2998116123" class="action"><span data-i18n="ui.MULTIPLE_RELATION_EDITOR">Multiple Relation Editor</span></li>
    <li data-action="CRMMASSRELEDITOR" data-parameters="" data-id="2998116124" class="action"><span data-i18n="ui.MASS_RELATION_EDITOR">Mass Relation Editor</span></li>
    <li class="k-separator"></li>
    <li class="k-separator"></li>
    <li class="k-separator"></li>
    <li data-action="CRMAPPLICATIONS" data-parameters="" data-id="2998116157" class="action"><span data-i18n="ui.CUSTOMER_APPLICATIONS">Customer Applications</span></li>
    <li data-action="CRMCALLLOG" data-parameters="" data-id="2998116187" class="action"><span data-i18n="ui.PHONE_CALLS">Phone Calls</span></li>
    <li data-action="CRMCRASEDITOR" data-parameters="" data-id="2998116189" class="action"><span data-i18n="ui.CR_STATUS_EDITOR">CR Status Editor</span></li>
    <li class="k-separator"></li>
    <li class="k-separator"></li>
</ul>

This html is created dynamically by commands coming from a web socket. But I want no li tags having class k-seperator as first or last child of ul tag. And also I don't want consecutive li tags having k-separator.

I aim to have the following html:

<ul>
    <li data-action="CRMEVENTSTREAM" data-parameters="" data-id="3084314321" class="action"><span data-i18n="ui.EVENT_STREAM">Event Stream</span></li>
    <li data-action="APPCALENDARVIEW" data-parameters="" data-id="3084314323" class="action"><span data-i18n="ui.CALENDAR">Calendar</span></li>
    <li data-action="CRMCUSTOMERSVIEW" data-parameters="" data-id="3084314324" class="action"><span data-i18n="ui.CUSTOMERS">Customers</span></li>
    <li data-action="PROFILEEDITDLG" data-parameters="DM_CC" data-id="3084314325" class="action"><span data-i18n="ui.PROFILE_EDITOR">Profile Editor</span></li>
    <li class="k-separator"></li>
    <li data-action="VIEWCASHMOVEMENT" data-parameters="" data-id="3084314327" class="action"><span data-i18n="ui.CASH_MOVEMENT">Cash Movement</span></li>
    <li data-action="CRMAPPLICATIONLIST" data-parameters="" data-id="3084314328" class="action"><span data-i18n="ui.APPLICATION_LIST">Application List</span></li>
    <li class="k-separator"></li>
    <li data-action="CRMRELATIONEDITOR" data-parameters="" data-id="2998116122" class="action"><span data-i18n="ui.CUSTOMER_RELATION_EDITOR">Customer Relation Editor</span></li>
    <li data-action="CRMMULTIRELEDITOR" data-parameters="" data-id="2998116123" class="action"><span data-i18n="ui.MULTIPLE_RELATION_EDITOR">Multiple Relation Editor</span></li>
    <li data-action="CRMMASSRELEDITOR" data-parameters="" data-id="2998116124" class="action"><span data-i18n="ui.MASS_RELATION_EDITOR">Mass Relation Editor</span></li>
    <li class="k-separator"></li>
    <li data-action="CRMAPPLICATIONS" data-parameters="" data-id="2998116157" class="action"><span data-i18n="ui.CUSTOMER_APPLICATIONS">Customer Applications</span></li>
    <li data-action="CRMCALLLOG" data-parameters="" data-id="2998116187" class="action"><span data-i18n="ui.PHONE_CALLS">Phone Calls</span></li>
    <li data-action="CRMCRASEDITOR" data-parameters="" data-id="2998116189" class="action"><span data-i18n="ui.CR_STATUS_EDITOR">CR Status Editor</span></li>
</ul>

How can I manipulate the dom using jquery?

Thanks,

Upvotes: 0

Views: 89

Answers (1)

hoverbikes
hoverbikes

Reputation: 435

Note you want to remove the adjacent siblings before you take out the first and last.

$('li.k-separator + li.k-separator').remove();
$('li.k-separator:first-child, li.k-separator:last-child').remove();

http://jsfiddle.net/54dd4/

Upvotes: 6

Related Questions