Repeating Elements Even After Using .remove();

[mongoose00318]

I am populating a modal window with some divs based on data which is retrieved via AJAX anytime the user clicks a button which opens the modal window.

Here is the HTML:

<div class="row">

	<div class="float-left unbranded m-2 p-2 border border-dark rounded bg-primary text-white">

		<p class="border-bottom pb-0 mb-1">Unbranded</p>
		<input type="text" name="price_unbranded" size="5" placeholder="$">

	</div>

	<div class="float-left price m-2 p-2 border border-dark rounded d-none bg-secondary text-white">

		<p class="border-bottom pb-0 mb-1">Price 1</p>
		<select name="price_ent[]">
			<option>Select Enterprise</option>						
		</select><br>
		<input type="text" name="price_price[]" size="5" placeholder="$">

	</div>

</div>

Here is the jQuery:

//user clicks on edit button for a product
$('body').on('click', '.btn-edit', function() {

	$('div.price:not(:hidden)').remove(); //remove any existing elements other than the hidden template

	$.ajax({
		type: 'GET',
		url: 'scripts/leds_product_manager.php',
		data: {
			action: 'get_led',
			id: $(this).attr('data-product-id'),
		},
		success: function(data) {
			
			//parse response
			data = $.parseJSON(data);

			var consignment = ( data.consignment == 0 ) ? 'No' : 'Yes';

			//populate selects
			$('#add-edit-product select#make').find('option').attr('selected', false);
			$('#add-edit-product select#make option[value=' + data.make + ']').attr('selected', 'selected');
			$('#add-edit-product select#qty-per-box').find('option').attr('selected', false);
			$('#add-edit-product select#qty-per-box option[value=' + data.qty_per_box + ']').attr('selected', 'selected');
			$('#add-edit-product select#consignment').find('option').attr('selected', false);
			$('#add-edit-product select#consignment option[value=' + consignment + ']').attr('selected', 'selected');

			//populate inputs
			$('#add-edit-product input#part_number').val(data.part_number);
			$('#add-edit-product input#description').val(data.description);

			var count = 1;
			$.each(data.price, function(i,d) {
				
				// handle "Unbranded" price
				if ( d.enterprise == 'Unbranded' ) {

					$('div.unbranded input').val(d.price);

				} else {

					//handle all the others
					var div = $('div.price:last');
					div.clone().removeClass('d-none').insertAfter(div);
					$('div.price:last p:first').text('Price ' + count);

					//setup selects
					cur_ent = d.enterprise;
					$.each(data.enterprises, function(i,d) {

						if ( cur_ent == d.enterprise )
							$('div.price:last select').append('<option value=' + d.enterprise + ' selected="selected">' + d.enterprise + '</option>');
						else
							$('div.price:last select').append('<option value=' + d.enterprise + '>' + d.enterprise + '</option>');
					});

					//populate price
					$('div.price:last input').val(d.price);

				}

				count++;

			});

			//change button view
			$('.add-new-product').hide();
			$('.edit-new-product').attr('data-product-id', data.id).show();
			
			// change the title of the dialog box and open it
			$('#add-edit-product').dialog('option', 'title', 'Edit Record').dialog('open');

		}

	});

});

At the top I have: $('div.price:not(:hidden)').remove(); to remove any preexisting elements and if I enter that into the console it erases all the correct elements. But anytime I open the modal window and then reopen it it is still duplicating the elements. Here are some screenshots (also I checked the json response coming back each time and all of that seems correct; it has to be something I am doing wrong with the jQuery):

First open:

Second open of the modal window:

I've tried alerting how many elements of div.price which are visible, etc and can't figure out where I am going wrong...

[requinix]

Riddle me this: at the moment that code is running, what visible "price" inputs are there?

If you want to remove prices from the modal then remove prices from the modal. As in literally, find the prices in the modal's markup and remove them.

[mongoose00318]

@requinix Well...I know at first there aren't any visible price inputs but after the first time it has run there should be some? What do you mean when you say find it in the modals markup? I guess I thought that was what I was doing lol

[mongoose00318]

@requinix Using this? https://api.jquery.com/html/

[requinix]

4 minutes ago, mongoose00318 said:

Well...I know at first there aren't any visible price inputs but after the first time it has run there should be some?

Are you sure they're visible? You can see them on the page?

 

Quote

What do you mean when you say find it in the modals markup? I guess I thought that was what I was doing lol

Your selector is finding every single visible div.price on the page. I'm saying, find the div.price inside the modal so that way you don't even have to care whether they're visible.

[mongoose00318]

Okay this fixed it:

$('html div#add-edit-product').find('div.price:not(:first)').remove();

Thanks man @requinix

[mongoose00318]

@requinix Just curious...

So..just doing this: 

$('div#add-edit-product').find('div.price:not(:first)').remove();

Isn't actually affecting the HTML?

[requinix]

Sure it does. You just said it was working, didn't you?

Also, $(selector).find(selector) is wasteful. Just do one $(selector selector).

[mongoose00318]

Just now, requinix said:

Sure it does. You just said it was working, didn't you?

Oh yes it still works even without the html selector in front of it..I guess it was just a matter of referencing it's parent container as you pointed out.  Thanks again.

[requinix]

8 minutes ago, mongoose00318 said:

Oh yes it still works even without the html selector in front of it..I guess it was just a matter of referencing it's parent container as you pointed out.  Thanks again.

Not quite, no. It was a matter of the elements being visible or not. Or I guess for consistency's sake I should say it was about them being visible or not.
If the modal is hidden then the prices are not visible, right? And if you tell jQuery that you want to remove the visible prices then that's not going to do anything. So you have to take out that part of the selector.
But if you do that then you'll target every div.price on the page, which may or may not be acceptable. I assumed not. Which means that to avoid removing things you don't want to remove, you have to tell jQuery exactly what you did want to remove: the price inputs inside the modal.

Thus your final code should/could be

$('div#add-edit-product div.price:not(:first)').remove();

 

[mongoose00318]

Ohhhh....gotcha. Lol your riddle...now I understand. Yes the modal was hidden while I was piecing it all together than displaying to the user. Well, that is embarrassing...awesome thanks for the explanation.