title: how to add sweet alert confirm in jquery
body: <p>Good evening,
  I am a beginner in developing JS, I tried several times to make a confiramation (sweet alert) to the user when trying to delete an item.</p>
  
  <blockquote>
    <p>I use any event to trigger the alarm?</p>
  </blockquote>
  
  <p>this my code in Html:</p>
  
  <pre><code>     &lt;!-- sweet alerts Css--&gt;
            &lt;link href="{{ asset('template/assets/sweet-alert/sweet-alert.min.css') }}" rel="stylesheet"&gt;
  
      &lt;!-- sweet alert JS--&gt;
          &lt;script src="{{ asset('template/assets/sweet-alert/sweet-alert.min.js') }}"&gt;&lt;/script&gt;
          &lt;script src="{{ asset('template/assets/sweet-alert/sweet-alert.init.js') }}"&gt;&lt;/script&gt;
  
  &lt;!-- form---&gt;
       &lt;form id="deleteAll" method="post" action="{{ path('projets_deleteAll') }}" 
      &lt;!--checkAll ---&gt;
       &lt;input type="checkbox" id="checkAll"/&gt;
  
       {% for entity in entities %}
          &lt;input type="checkbox" id="d" name="check[]" value="{{ entity.id}}"/&gt;
      {% endfor %}
  
       &lt;strong &gt;
       &lt;button type="submit" class="btn btn-lg btn-danger" id="bn"  &gt;
             &lt;i class="fa fa-trash" &gt;&lt;/i&gt; Delete&lt;/button&gt;
       &lt;/strong&gt;
      &lt;/form&gt; 
  &lt;!-- ./form---&gt;
  </code></pre>
  
  <p>-Code Jquery.</p>
  
  <p></p>
  
  <pre><code>$(document).ready(function(){
  
          $("#checkAll").click(function(){
  
              var checked_status = this.checked;
  
              $("input[name='check[]']").each(function(){
  
                  this.checked = checked_status;
                  var v = $("#d").val();
  
                  $('#bn').trigger('submit', function (e){
                      e.preventDefault();
                      actiondesubsitution();
                  });
  
          });
      });
  
          if(v.length&gt;0){
  
              document.querySelector('#d').onclick = function(){
                  swal({
                              title: "Are you sure?",
                              text: "You will not be able to recover this imaginary file!",
                              type: "warning",
                              showCancelButton: true,
                              confirmButtonColor: '#DD6B55',
                              confirmButtonText: 'Yes, delete it!',
                              closeOnConfirm: false
                          },
                          function(){
                              swal("Deleted!", "Your imaginary file has been deleted!", "success");
                          });
              };
          }
          else{
              new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
                      .setTitleText("Oops...")
                      .setContentText("No selection for deleting !")
                      .show();
          }
      });
  </code></pre>
  
  <p></p>
  
  <blockquote>
    <p>the problem that the alert is not functional at "if"</p>
  </blockquote>
  
  <p>the error is:</p>
  
  <blockquote>
    <p>VM1631:187 Uncaught DOMException: Failed to execute 'querySelector' on
    'Document': '[object HTMLDocument]' is not a valid selector.
        at Error (native)
        at CommandLineAPIImpl.$ (&lt;anonymous&gt;:187:84)
        at &lt;anonymous&gt;:1:1CommandLineAPIImpl.$ @ VM1631:187(anonymous function) @ VM1633:1 javascript:
    console.log(v.length); VM1634:1 Uncaught ReferenceError: v is not
    defined
        at &lt;anonymous&gt;:1:25(anonymous function) @ VM1634:1</p>
  </blockquote>
  
  <p>Thank you for helping me to integrate this alert.</p>