CODEWITHSUNDEEP
javascriptjqueryarraysreplaceappend
Michael
Michael

Reputation: 443

How to Remove/Empty Sibling in JQuery & Append

I'm wondering if there is a cleaner way of removing all siblings from an element and then appending html. This code is in a for loop and every time I'm updating the filter_checkbox_price with new price_array[0]. So maybe appending isn't the best option? Is there a replace function in jQuery?

Update: I'm looking to first append these elements and then replace .filterOptionOnly and . filter_checkbox_price on next loop

Code:

    $(this).find("label span.filter-label").siblings().remove();
    $(this).find("label span.filter-label").append("<span class='filterOptionOnly'>only</span>").after("<span class='filter_checkbox_price'>" + pos_currency_code + price_array[0] + "</span>");

HTML:

<label for="filter-pickup-location-4">
    <span class="filter-label" title="SFB: Orlando Sanford Intl Airport">
         <span class="label">SFB: Orlando Sanford Intl Airport</span>
         <span class="filterOptionOnly">only</span>
    </span>
    <span class="filter_checkbox_price">$111</span>
</label>

Upvotes: 0

Views: 80

Answers (1)

Takit Isy
Takit Isy

Reputation: 10081

If your elements exist at page load,
you can access and modify their html using the .html() method.

Your code should be like this:

var pos_currency_code = "$";
var price_array = [];
price_array[0] = 50;

$("label span.filter-label .filterOptionOnly").html('only');
$("label .filter_checkbox_price").html(pos_currency_code + price_array[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="filter-pickup-location-4">
    <span class="filter-label" title="SFB: Orlando Sanford Intl Airport">
         <span class="label">SFB: Orlando Sanford Intl Airport</span>
         <span class="filterOptionOnly">only</span>
    </span>
    <span class="filter_checkbox_price">$111</span>
</label>

More information: http://api.jquery.com/html/

Hope it helps.

Upvotes: 1

Related Questions