Jump to content

Repeating Elements Even After Using .remove();

Recommended Posts

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 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>						
		<input type="text" name="price_price[]" size="5" placeholder="$">



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

		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.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>');
							$('div.price:last select').append('<option value=' + d.enterprise + '>' + d.enterprise + '</option>');

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




			//change button view
			$('.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...

Link to post
Share on other sites

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.

Link to post
Share on other sites
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?



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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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();


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.