Reload the bootstrap3 modal with dynamic data

Question

I have a modal which initially has two

elements inside. But users can dynamically add additional

elements also.

What I want to do is to show only the default two

s each time modal is closed and reopened.

I tried the following:

$('#modal').on('show.bs.modal', function () {
   $(this).removeData('bs.modal');
});

It did not help.

How can I do this?

Initial modal body:


        
            
                
                    
                        1
                    
                    
                         
  
 ,   
 Contact: 
 Phone: 
                        
                    
                
            
            
                
                    
                        
                            
                                
                            
                            
                                
                            
                            
                                
                            
                            
                                
                            
                            
                                
                                    
                                        
                                    
                                
                                
                                    
                                        
                                    
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                
                                   
                                        
                                    
                                
                                
                                    
                                       Price:
                                        
                                    
                                
                            
                        
                   
                   
                        
                    
                
            
        

        

        
            
                
                    
                       2
                    
                    
                         
  
 ,   
 Contact: 
 Phone: 
                        
                            
                        
                    
                    
                        Pickup information is 
 not available yet
                        
                            
                        
                    
                
            
            
                
                    
                        
 
 ,  
 Contact: 
 Phone: 
                        
                            
                                 Price:

Basically, it has three main parts:


    ....





    ....

The first two divs are initial defaults. When a user presses a Add Leg button, another div with id leg-3 (and so on.) is inserted into the template.

madalinivascu · Accepted Answer

try the following:

$('#modal').on('show.bs.modal', function () {
   // Get the added divs within the modal and remove all except the first 2
   $('div[id^="leg"]').not('#leg-1,#leg-2').remove();
});

demo: https://jsfiddle.net/hmf2v4bj/

Reload the bootstrap3 modal with dynamic data

Answers (2)

Related Questions