Do I use a switch or if else to simplify this? jQuery

Question

I tried using both switch and if else but I could not get it to work right. I want to not repeat myself this many times.

        $('div.ui-widget-content').on("click", ".date-edit", function () {
            var dateInput = jQuery(this).html("");
            $(".pop-up-box-date").dialog(dateInput);
        });

        $('div.ui-widget-content').on("click", ".radio-edit", function () {
            var radioInput = jQuery(this).html("");
            $(".pop-up-box-radio").dialog(radioInput);
        });

        $('div.ui-widget-content').on("click", ".checkbox-edit", function () {
            var checkboxInput = jQuery(this).html("");
            $(".pop-up-box-checkbox").dialog(checkboxInput);
        });

        $('div.ui-widget-content').on("click", ".dropdown-edit", function () {
            var dropdownInput = jQuery(this).html("");
            $(".pop-up-box-dropdown").dialog(dropdownInput);
        });

        $('div.ui-widget-content').on("click", ".telephone-edit", function () {
            var telephoneInput = jQuery(this).html("");
            $(".pop-up-box-telephone").dialog(telephoneInput);
        });

        $('div.ui-widget-content').on("click", ".button-edit", function () {
            var buttonInput = jQuery(this).html("");
            $(".pop-up-box-button").dialog(buttonInput);
        });

        $('div.ui-widget-content').on("click", ".textarea-edit", function () {
            var textareaInput = jQuery(this).html("");
            $(".pop-up-box-textarea").dialog(textareaInput);
        });

I am quite new to this so if there is a better way that I don't know please let me know. Thanks

Here is one of the HTML blocks:

<div class='pop-up-box-text' style='display: none;' Title="Edit Text Box">
    <p id="textTitle" class="pop-up-copy">Title</p><p class="pop-up-inputs"><input type='text' /></p>
    <p class="pop-up-copy">Textbox Placeholder</p><p class="pop-up-inputs"><input id="textbox" type='text' /></p>
    <div class="submit"><button id="subimt" class="submit">Submit</button></div>
</div>

The edit is located in this html replacement:

case 'btntype_text':
    jQuery('.ui-widget-content .' + fieldClass).html("
           <div class='drop-blank'>
              <p>Text Box</p>
              <div class='li-float'>
                  <input id='textPlaceholder' type='text' placeholder='Text' disabled/>
              </div>
              <div class='text-edit'></div>
              <div class='delete'></div>
           </div>");
    fieldType = "text";
    break;

Answer 1

Assuming your naming convention is consistent, you can do this:

$('div.ui-widget-content').on("click", "[class$=edit]", function () {
     var input = jQuery(this).html("");
     $(".pop-up-box-" + this.className.match(/(\w+)-edit/)[1]).dialog(input);
});

I am making the assumption that you want to capture classes ending with "edit", so we make use of ending-with selector and use some basic regex to get the specific class name.