Remove Entire Modal with Jquery

Question

I've been looking at previously posted StackOverflow questions, and still could not find my answer. So, I've been trying to simply delete the entire modal when I click on the close button. I can't get it to work, unfortunately. This is my code, so far.

var jQueryLoaded = 0;


function Modal(title, contents) {
    if (jQueryLoaded === 1) {
        var modal = document.createElement('div'),
            modal_box = document.createElement('div'),
            modal_head = document.createElement('div'),
            modal_title = document.createElement('div'),
            close_btn = document.createElement('div'),
            modal_content = document.createElement('div');

        modal.className = 'modal';
        modal_box.className = 'modal_box';
        modal_head.className = 'modal_head';
        modal_title.className = 'modal_title';
        modal_title.innerHTML = title;
        close_btn.className = 'modal_close';
        close_btn.innerHTML = '\u00D7';
        modal_content.className = 'modal_content';
        modal_content.innerHTML = contents;
        $("body").append(modal);
        $(modal).append(modal_box);
        $(modal_box).append(modal_head, modal_content);
        $(modal_head).prepend(modal_title);
        $(modal_head).append(close_btn);
    } else {
        console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
    }
}
$(document).ready(function () {
    jQueryLoaded = 1;
    $("div.modal_close").on('click', function () {
        $(this).parent().parent().closest('.modal').remove();
    });
    Modal('hello','<p>Example</p>');
});

/* Modals based off of W3Schools example! */

div.modal {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
}

div.modal > div.modal_box {
    background: #FFFFFF;
    margin: auto;
    padding: 5px;
    border: 1px solid #000000;
    width: 80%;
    box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}

div.modal > div.modal_box > div.modal_head {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #000000;
    min-height: 10px;
    font-weight: 16px;
}

div.modal > div.modal_box > div.modal_head > div.modal_title {
    display: inline-block;
    color: #000000;
    text-align: center;
    font-weight: 900;
    font-size: 24px;
}

div.modal > div.modal_box > div.modal_head > div.modal_close {
    margin: 1px;
    font-weight: 900;
    color: #000000;
    border: 1px solid transparent;
    padding: 2px;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    float: right;
    line-height: 10px;
    user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -k-user-select: none;
    -moz-user-select: none;
}

div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
    border: 1px solid #000000;
    background: rgba(0, 0, 0, 0.3);
}

div.modal > div.modal_box > div.modal_head > div.modal_close:active {
    background: rgba(255, 0, 0, 0.8);
    border: 1px solid #000000;
}

div.modal > div.modal_box > div.modal_content {
    padding: 4px;
    padding-left: 10px;
    font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Mind you, the code to remove the modal was just the last one I tried. I tried many others like $(this).parent().parent().closest('.modal').remove(); and $(this).parent().parent().find('.modal').remove().

Answer 1

You're mixing JS and jQuery, not that it's not good, but you use it in an inappropriate way. jQuery is designed to help you manipulate with DOM and events - make use of it!

If you're building a Modal function to handle modals, the close should be handled from within the script, not by adding extra stuff all around your .js files.

How do you call your Modal?

---

Here's an example to give you an idea and get you started:

jQuery(function ($) { // DOM is ready and $ alias secured

  Modal("opened",{
    title : "Opened example",
    content : "<p>Immediately opened from JS using <code>.open()</code></p>"
  }).open();
  
  Modal("test1", {
    title : "This is Title",
    content :
      `<p>
        <b>Lorem Ipsum</b>
        Dolor sit amet<br>
        Example
      </p>`
  });
  
  Modal("another", {
    title: "Auto-hide in 3sec",
    content: "<p>Like it? <b>Show some love</b></p>",
    duration: 3000
  });

});

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }

<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
/** Modal - Custom modals example by RokoCB
  * @param {String} modalId - A modal name used to reference a modal
  * @param {Object} data - {title:"String", content:"HTML", duration:ms}
  * @return {Object} - methods: .open() .close() 
  */
function Modal(modalId, data) {
  
  // DEFAULT MODAL STYLES
  
  var css = {
    area: {
      position:   "fixed",
      visibility: "hidden",
      opacity:    0,
      left:       0,
      top:        0,
      right:      0,
      bottom:     0,
      zIndex:     99999,
      background: "rgba(0,0,0,0.4)",
      transition: "0.4s",
    },
    modal: {
      position:   "absolute",
      left:       "50%",
      top:        "50%",
      minWidth:   240,
      transform:  "translate(-50%, -50%)",
      background: "#fff",
      boxShadow:  "0 8px 24px rgba(0,0,0,0.6)",
    },
    title: {
      padding:    "8px 32px 8px 16px",
      fontSize:   18,
      borderBottom:"1px solid rgba(0,0,0,0.15)",
    },
    content: {
      padding:    "16px",
    },
    close: {
      position:   "absolute",
      top:        4,
      right:      4,
      padding:    8,
      cursor:     "pointer",
      userSelect: "none",
    }
  }

  // ELEMENTS
  
  var $area = $("<div/>", {
    class: "modal_area",
    appendTo: "body",
    css: css.area,
    click : closeModal,
  });
  
  var $modal = $("<div/>", {
    class: "modal",
    appendTo: $area,
    css: css.modal,
    click: function(evt){evt.stopPropagation();}
  });
  
  $("<div/>", {
    class: "modal_title",
    appendTo : $modal,
    text : data.title,
    css: css.title,
  });
  
  $("<div/>", {
    class: "modal_content",
    appendTo : $modal,
    html : data.content,
    css: css.content,
  });
  
  $("<div/>", {
    class: "modal_close",
    appendTo : $modal,
    text : '\u00d7',
    css: css.close,
    click : closeModal,
  });
  
  // ACTIONS

  var closeTimeout = null; 
  
  function closeModal() {
    $area.removeClass("open").css({visibility:"hidden", opacity:0});
  }
  
  function openModal() {
    $area.addClass("open").css({visibility:"visible", opacity:1});
    if(data.duration) {
      clearTimeout(closeTimeout);
      closeTimeout = setTimeout(closeModal, data.duration);
    }
  }
  
  $(document).on("click", "[data-modal='"+modalId+"']", openModal);
  
  // METHODS

  return {
    open : openModal,
    close : closeModal
  }

}
</script>

Answer 2

The button will have no event listener attached to it because you're creating it after the attaching of the event listener. There is two solution for this:

EITHER:

Add the event listener just after the button is created inside the Modal class here:

close_btn.onclick = function() {
    $(this).closest('.modal').remove();
}

OR:

Use event delegation like this:

$(document).on('click', 'div.modal_close', function () {
    $(this).closest('.modal').remove();
});

NOTE: Since, as mentioned in the comments, you are already using jQuery why not using it inside the Modal class too.