Onclick replace item information in a div with jQuery

Question

The goal is to build an estimator interface for my customer.

So I've several boxes with items the customer can add or remove (domain name, hosting, ...).

The result of the selected items is shown here:

<ul class="calculator__sidebar-ul">
</ul>

The problem with my code is each time a user click on an item, it adds a new line whereas it should replace the one in place.

How can I change this behavior ?

$('input[name="hosting"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    if($('li #hosting').length == 1) { $('li #hosting').remove(); }
    $('.calculator__sidebar-ul').append('<li id="hosting">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});


$('input[name="domain"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    if($('li #domain').length == 1) { $('li #domain').remove(); }
    $('.calculator__sidebar-ul').append('<li id="domain">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Hosting (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No hosting
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="200" data-title="Yes, add one hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one hosting
            <span class="calculator__color_label">+ 200$</span>
        </span>
    </label>
</div>




<h4>Domain name (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No domain
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="50" data-title="Yes, add one domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one domain
            <span class="calculator__color_label">+ 50$</span>
        </span>
    </label>
</div>



<ul class="calculator__sidebar-ul">
</ul>

Thanks.

@freefaller has the solution in the comment above, but the reason for your issue is that li is #hosting, so length is always 0. Once you change to html() you can remove the if statement completely — Rory McCrossan
– Rory McCrossan, Commented Jun 20, 2019 at 14:41
@RoryMcCrossan, the reason why I think I need if($('li #hosting').length == 1) {} is if the user change the choice of the radio. — PacPac
– PacPac, Commented Jun 20, 2019 at 14:45
You don't need it. html() will overwrite any previous content, so the prior selections have no relevance to the current content — Rory McCrossan
– Rory McCrossan, Commented Jun 20, 2019 at 14:46

F__M · Accepted Answer · 2019-06-20 15:25:13Z

1

I would recommend more this approach.

With this one you'll only update the <ul> part without duplicating your jquery code.

// Update the <ul> part:
<ul class="calculator__sidebar-ul hidden">
    <li id="hosting"></li>
    <li id="domain"></li>
</ul>

// Update the jQuery code
$('input[class="radio-btn__radio"]').click(function() {
    name = $(this).attr('name');
    value = $(this).data('value');
    title = $(this).data('title');

    $('#' + name).empty();
    $('#' + name).html(title + '<span class="calculator__sidebar-price"> + ' + value + ' $</span>');    
});

answered Jun 20, 2019 at 15:25

F__M

1,5883 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

freefaller · Accepted Answer · 2019-06-20 14:57:55Z

0

The following was written when the question only gave information about a single section...

Using .append() will add the HTML to the end of the HTML that already exists in the element.

Instead, use .html() which will replace everything...

$('.calculator__sidebar-ul').html('<li id="hosting">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');

And as @Rory says in his comment, using .html() means you no longer need to remove the existing items before hand (which wouldn't have worked anyway), so you can delete the following line...

if($('li #hosting').length == 1) { $('li #hosting').remove(); }

Updated...

In light of the extra information provided by the OP that there are two sections that need to drive the display...

Your code is not removing the existing <li> element because $("li #hosting") will only find an element in <li> which has an id="hosting".

Instead you just want to find and remove $("#hosting").

In this situation, your use of .append is correct.

$('input[name="hosting"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    $('#hosting').remove();
    $('.calculator__sidebar-ul').append('<li id="hosting">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});


$('input[name="domain"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    $('#domain').remove();
    $('.calculator__sidebar-ul').append('<li id="domain">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Hosting (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No hosting
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="200" data-title="Yes, add one hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one hosting
            <span class="calculator__color_label">+ 200$</span>
        </span>
    </label>
</div>




<h4>Domain name (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No domain
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="50" data-title="Yes, add one domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one domain
            <span class="calculator__color_label">+ 50$</span>
        </span>
    </label>
</div>



<ul class="calculator__sidebar-ul">
</ul>

edited Jun 20, 2019 at 14:57

answered Jun 20, 2019 at 14:40

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

6 Comments

PacPac Over a year ago

Hello! thanks for your help. I've add the JS Fiddle link to better image the problem I have when I have two item (hosting + domain).

freefaller Over a year ago

Don't use jsfiddle, update your question to use a snippet with a minimal reproducible example

PacPac Over a year ago

Hello, I will try but I do not know to use it.

freefaller Over a year ago

Good thing I provided a link on how to use it then

PacPac Over a year ago

Hum. I think it's now working. I've also remove the jsfiddle link.

|

Collectives™ on Stack Overflow

Onclick replace item information in a div with jQuery

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related