How to close a dynamic modal with jquery

Question

i have a table which contain some rows and in those rows i have a modal row by row, I can open one , but when i tried to close it remain a black background . i tried with modal('hide') but it refuse this is my exemple:

var equipes_info = <?= $equipes_info ?>;
var liste_agent = (<?= json_encode($liste_agent) ?>);
var nombreD2D = 0;
var nouveau_donnee = [];
var indexEquipe =0 ;
var count = 0;
var count_valider = 0;
var detail_to_send = [];
var agent_id_to_send = [];
var data_to_send = [];



function displayAddEquipe()
{
  var html_equipe_add = ``;
  const element = $('#add_equipe');
  element.html('');
 
  html_equipe_add = `
  <div id="myModal" class="modal fade container" role="dialog">
                            <div class="modal-dialog"> 
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                  <h4 class="modal-title">Ajouter une Equipes</h4>
                                </div>
                                <div class="modal-body">
                                     <div class="form-group row">
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" placeholder="Designation de l'equipe" name="designation_equipe" id="designation_equipe"/>
                                        </div>
                                        <div class="col-md-6">
                                        <select name="liste_user" class="form-control col-md-6" id="liste_user">
                                                  <option value="0">selectionner agent</option>`;
                                                liste_agent.forEach((element)=> {
                                                  html_equipe_add += `<option value="${element.agent_id}">${element.agent_name}</option>`;
                                                }) 
                                             html_equipe_add += `  </select>
                                        </div>
                                        <div class="col-md-2">
                                        <button class="btn btn-primary btn-xs" onclick="addAgentTempoNouveau(${indexEquipe})" style="margin-top: 8px;" type="button"><span class="fa fa-plus"></span></button></div>
                                     </div>
                                     <div class="form-group col-md-12">
                                       <table class="table table-condensed table-stripped" id="ajouter_tempo_table">
                                         <thead>
                                             <tr>
                                                <th>Id</th>
                                                <th>Nom</th>
                                                <th>Action</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                             
                                         </tbody>
                                       </table>
                                     </div>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-success btn-xs" onclick="valider_equipe_ajout()" >Valider</button>
                                  <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
                                </div>
                              </div>

                            </div>
                          </div>               
  `;

  element.html(html_equipe_add);

}



function displayEquipe()
{
    let agent = [];
    const element = $('#equipe_display');
    element.html('');

    equipes_info.forEach((equipe, indexEquipe) => {
      equipe.agentsList.forEach((agent, index)=> {
        liste_agent = liste_agent.filter( function(item) {
           return  (item.agent_id !== agent.agent_id)
        }); 
      }); 
    });
    nombreD2D = equipes_info.length
    count_valider = equipes_info.length;
    $('#nombreD2D').html(` <button class="btn btn-info btn-xs" type="button"> ${nombreD2D}</button>`);

    var html_equipe = ``;
      equipes_info.forEach((equipe, indexEquipe) => {
      let agentList; 
      let listAgentArray = [];
  
        equipe.agentsList.forEach((agent, index)=> { 
            agentList += `
            <tr>
                  <td>${index+1}</td>
                  <td>${agent.agent_name}</td> 
                  <td><button class="btn btn-danger btn-xs" title="supprimer Agent" type="button" onclick="toDeleteAgent(${index}, ${indexEquipe}, ${agent.agent_id}, '${agent.agent_name}')"><i class="fa fa-remove"></i></button></td>
            </tr>
            `;
        }) ;
 
        html_equipe += `
            Désignation de l'équipe: <u><span ><b>${equipe.nom}</span></b></u>
                                                          <table class="table table-stripped table-condensed" id="tableRefresh${indexEquipe}">
                                                               <tr>
                                                                   <th>#num</th>
                                                                   <th>Nom</th>
                                                                   <th>
                                                                       <button title="supprimer equipe" class="btn btn-danger btn-xs" type="button" onclick="toDeleteEquipe(${indexEquipe})"><i class="fa fa-trash"></i></button>
                                                                       <button title="Ajouter Agent" class="btn btn-info btn-xs" type="button" data-toggle="modal" data-target="#myModal${indexEquipe}"><i class="fa fa-plus"></i></button>
                                                                       <div id="myModal${indexEquipe}" class="modal modelHide${indexEquipe} fade container" role="dialog">
                                                                            <div class="modal-dialog">
                                                                              <!-- Modal content-->
                                                                              <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                                  <h4 class="modal-title">Ajouter des Agents</h4>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <div class="form-group row">
                                                                                        <div class="col-md-4">
                                                                                            <labe>${equipe.nom}</label>
                                                                                        </div>
                                                                                        <div class="col-md-6">
                                                                                            <select name="liste_user" class="form-control col-md-6" id="liste_user${indexEquipe}">
                                                                                                <option value="0">selectionner agent</option>`;
                                                                                              liste_agent.forEach((element)=> {
                                                                                                html_equipe += `<option value="${element.agent_id}">${element.agent_name}</option>`;
                                                                                              }) 
                                                                       html_equipe += `  </select>
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                        <button class="btn btn-primary btn-xs" onclick="addAgentTempo(${indexEquipe})" style="margin-top: 8px;" type="button"><span class="fa fa-plus"></span></button></div>
                                                                                    </div>
                                                                                    <label> Liste agent: <span id="Id_nouveau${indexEquipe}"> </span></label>
                                                                                    
                                                                                    <input type="hidden" value="" name="nouveau" id="nouveauAgent" />
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                  <button type="button" class="btn btn-success btn-xs" id="valider_equipe" onclick="addAgentEquipe(${indexEquipe})">${indexEquipe}Valider</button>
                                                                                  <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
                                                                                </div>
                                                                              </div>

                                                                            </div>
                                                                          </div>     
                                                                       </th>
                                                               </tr>
                                                               <tbody>
                                                               ${agentList}
                                                               <tbody>
                                                    </table>
        `; 
    });

    element.append(html_equipe);
}

displayEquipe();
displayAddEquipe();


function valider_equipe_ajout() 
{
  indexEquipe = count_valider ++;
       if (  $('#designation_equipe').val() == null ||  $('#designation_equipe').val() == '') {
            alert("DONNER UNE DESIGNATION DE L'EQUIPE S'IL VOUS PLAIT...");
            return
         }
         data_to_send.push({'nom': $('#designation_equipe').val(),
           'teamId':count_valider,'agentListId':agent_id_to_send,
            'agentsList':detail_to_send
         })

         equipes_info.push({'nom': $('#designation_equipe').val(),
           'teamId':count_valider,'agentListId':agent_id_to_send,
            'agentsList':detail_to_send
         })
          console.log("indexEquipe ",indexEquipe);
    
          
          
         $('#myModal').modal('hide')
  
         var div = document.getElementById('afficher_liste_equipe');
         agent_id_to_send = [];
         detail_to_send = []; 
       
         $('#liste_user option').prop('selected', function() {
             return this.defaultSelected;
         });

         $('#ajouter_tempo_table tbody').empty();
          $('#designation_equipe').val('');
           designation_equipe = '';
           articleTable = []; 
           count = 0;
         displayEquipe()
}
 

  var compteur = 0;
 

function toDeleteAgent(indexAgent, indexEquipe, agent, agentName){  
      equipes_info[indexEquipe]['agentsList'].splice(indexAgent,1); 
      let agent_id_index =  equipes_info[indexEquipe]['agentListId'].indexOf(agent);
      liste_agent.push({agent_id:agent,agent_name:agentName});
 
      equipes_info[indexEquipe]['agentListId'].splice(agent_id_index,1);  
      if (equipes_info[indexEquipe]['agentsList'].length) { 
         displayEquipe();
         displayAddEquipe();
      }else{
        equipes_info.splice(indexEquipe,1);
        displayEquipe();
        displayAddEquipe();
      }
}

 function addAgentTempoNouveau(indexEquipe)
 {
  var liste_user = $("#liste_user option:selected").val(); 
         var ajouter_tempo = $("#liste_user option:selected").text(); 
         count ++ ;
 
        if (liste_user == 0 || liste_user == null || liste_user == '' || ajouter_tempo === 'selectionner agent') {
            alert("SELECTIONNER UN AGENT S'IL VOUS PLAIT...");
            return
         }
         
         let row = `<tr id="+articleId+">`;
         row += `<td id=""> ${count} <input type="hidden" name="user_id[]" value="${liste_user}"></td> 
               <td id="prix"> <input type="hidden" name="nom_agent[]" value="${ajouter_tempo}">${ajouter_tempo}</td>  
               <td><button class="btn btn-danger btn-xs" type="button" onclick="toDelete(this)"><i class="fa fa-remove"></i>
                   </button>
               </td>`;
           row +=`</tr>`;
    
         $("#ajouter_tempo_table").append(row);
         
         detail_to_send.push({'agent_name': ajouter_tempo, 'agent_id':liste_user})
         agent_id_to_send.push(liste_user)

         // equipes_info[count_valider]['agentsList'].push(agent)

         $("#liste_user option:selected").val(0);
         designation_equipe = $('#designation_equipe').val(); 
         $("#liste_user option:selected").remove();
         
 }

function addAgentTempo(indexEquipe){ 
          var liste_user = $("#liste_user"+indexEquipe+" option:selected").val(); 
          var ajouter_tempo = $("#liste_user"+indexEquipe+" option:selected").text(); 
          if (liste_user == 0 || liste_user == null || liste_user == '' || ajouter_tempo === 'selectionner agent') {
                alert("SELECTIONNER UN AGENT S'IL VOUS PLAIT...");
                return
            }
          let ajoutArray = [];
          nouveau_donnee.push({agent_id:liste_user,agent_name: ajouter_tempo})
          console.log(liste_user);
          let Id_nouveau = $("#Id_nouveau"+indexEquipe);
          console.log("--",Id_nouveau.val())
          let listAgent = '';
             nouveau_donnee.forEach((element) =>
            {
               listAgent += `
                 ${element.agent_name}, 
               `;
            }
          )
          Id_nouveau.html(listAgent);
}


function addAgentEquipe(indexEquipe){  
      
      nouveau_donnee.forEach((agent)=> {
        equipes_info[indexEquipe]['agentsList'].push(agent); 
      });
      console.log("#myModal"+indexEquipe); 
        $('#myModal'+indexEquipe).modal('hide');
       
        displayEquipe(); 
        
}
 
function toDeleteEquipe(indexEquipe ){ 
        equipes_info[indexEquipe]['agentsList'].forEach((agent, index)=> {
           liste_agent.push({agent_id:agent.agent_id,agent_name:agent.agent_name}); 
        });  
        console.log("Liste agent: ",liste_agent);
        equipes_info.splice(indexEquipe,1);
        displayEquipe(); 
        var el = document.getElementById('myModal');
        el.remove();
        displayAddEquipe();
}

this $('#myModal'+indexEquipe).modal('hide'); refuse to remove the background black transparent color and the page is like cold i can't do anything else

Answer 1

i successed to solve it with thoses tree lines: 1.$('#myModal'+indexEquipe).modal('hide'); // this line help me for to close the dynamic modal which i opened //but it remain a background color which block me to do anything for to remove it i use this second row 2. $('.modal-backdrop').remove(); //this row helpe for to remove the background color but the page is cold you can only tick on button but not move the scroll bar 3. $( "body" ).removeClass("modal-open"); // this last row help me for to remove a remaining class in body tag call modal-open which block the scroll page and the page become now dynamic again you can move the scroll bar again