点击提交后无法关闭Bootstrap 3模态窗口（vanilla JS）

Question

我对这一切都不熟悉所以请耐心等待......

我有一个Bootstrap 3模态窗口，其中打开了一些表单字段。单击Submit New Appointment后，我已设法将表单字段附加到DOM。 Buuut我似乎无法弄清楚在将字段附加到DOM之后如何关闭模态窗口。我希望通过编写一些优秀的ole vanilla JavaScript来实现这一目标。 （不幸的是我不能使用任何jQuery。）

我在下面添加了vanilla JavaScript代码。 （它基本上是从模式中的信息输入的信息创建一个预约卡，然后它作为卡显示在DOM中。）

谢谢你看看！

var form = document.getElementById('addForm');

// element to append the new carousel item to

var itemList = document.querySelector('.carousel-inner');

// form submit event

form.addEventListener('submit', addItem);

// form delete event

itemList.addEventListener('click', removeItem);

// add item Function

function addItem(e) {

  e.preventDefault();

  // get input value in the modal

  var newItem = document.getElementById('item').value;

  var newItemTwo = document.getElementById('time').value;

  var newItemThree = document.getElementById('name-of-client').value;

  var newItemFour = document.getElementById('phone-number-client').value;

  var newItemFive = document.getElementById('acces-notes').value;

  // create a new li element with the text grab from above

  var li = document.createElement('li');
  /**
   * Set the correct class name for the carousel to work
   */
  // li.className = 'list-group-item';
  li.className = 'item';
  li.style.maxWidth = '95%';
  li.style.border = 'solid 1px #d3d3d3';
  li.style.padding = '10px';
  li.style.height = '150px';
  li.style.marginRight = '12%';
  li.style.marginLeft = '12%';
  li.style.fontWeight = '500';
  li.style.fontSize = '14px';

  // console.log(li)

  // create a new p element with the text grab from above

  var pOne = document.createElement('p');
  pOne.className = 'items';
  pOne.style.fontSize = '12px';
  pOne.style.fontWeight = '400';
  pOne.style.marginTop = '5px';

  var pTwo = document.createElement('p');
  pTwo.className = 'items';
  pTwo.style.fontSize = '12px';
  pTwo.style.fontWeight = '200';

  console.log(pTwo)

  var pThree = document.createElement('p');
  pThree.className = 'items';
  pThree.style.fontSize = '12px';
  pThree.style.fontWeight = '200';
  console.log(pThree)

  var pFour = document.createElement('p');
  pFour.className = 'items';
  pFour.style.fontSize = '12px';
  pFour.style.fontWeight = '200';
  console.log(pFour)

  // add text node with input value

  li.appendChild(document.createTextNode(newItem));

  pOne.appendChild(document.createTextNode(newItemTwo));

  pTwo.appendChild(document.createTextNode(newItemThree));

  pThree.appendChild(document.createTextNode(newItemFour));

  pFour.appendChild(document.createTextNode(newItemFive));

  // create delete BUTTON
  var deleteBtn = document.createElement('button');
  deleteBtn.style.width = '50px';
  deleteBtn.style.float = 'right';
  deleteBtn.style.height = '50px';
  deleteBtn.style.borderRadius = '50%'
  deleteBtn.style.border = 'solid 1px red';
  deleteBtn.style.backgroundColor = 'white';
  deleteBtn.style.color = 'red';

  // add the classes to the delete BUTTON

  deleteBtn.className = "btn btn-danger btn-sm float-right delete";

  // append the text node

  deleteBtn.appendChild(document.createTextNode('X'));

  // append delete button into the LI

  li.appendChild(deleteBtn);

  // append li to list.

  /**
   * insert the new element at the beginning of the itemList element, not at the end
   */
  // itemList.appendChild(li);
  itemList.insertBefore(li, itemList.firstChild);

  // append p elements into LI; (not sure if this is the best way but its working)
  li.appendChild(pOne);
  li.appendChild(pTwo);
  li.appendChild(pThree);
  li.appendChild(pFour);
  li.appendChild(pFive);

}

// remove item function

function removeItem(e) {

  console.log(e.target)

  if (e.target.classList.contains('delete')) {

    if (confirm('Are you sure bro?')) {

      var li = document.querySelector('.item.active');

      itemList.removeChild(li);

      document.querySelector('.item').classList.add('active')

    }

  }

}

Image of the modal from Bootstrap 3