javascript - 删除带有动态添加按钮的动态添加的 TinyMCE 文本框

Question

以下代码使我能够删除动态添加的tinymce文本框。不幸的是它只适用于 jquery 版本 1.8.1。我当前的项目使用版本1.12.4。我需要对以下代码进行哪些更改才能使其与版本 1.12.4 兼容？

    $(document ).ready(function() {
    $('a.add-type').off('click').on('click', function(e) {
        e.preventDefault(); 
        var content = jQuery('#type-container .type-row'),
        element = null;
        for(var i = 0; i<1; i++){
            element = content.clone();
            var divId = 'id_'+jQuery.now();
            element.attr('id', divId);
            element.find('.remove-type').attr('targetDiv', divId);
            element.find('.tinymce-enabled-message-new').attr('id', 'txt_'+divId);
            element.find('input:checkbox').attr('id', 'md_checkbox_'+divId);
            element.find('label').attr('for', 'md_checkbox_'+divId);
            element.appendTo('#type_container');

        }
    });

    jQuery(".remove-type").off('click').on('click', function (e) {
        var didConfirm = confirm("Are you sure You want to delete");
        if (didConfirm == true) {
            var id = jQuery(this).attr('data-id');
            var targetDiv = jQuery(this).attr('targetDiv');
            jQuery('#' + targetDiv).remove();
        // }
            return true;
        } else {
            return false;
        }
    });
});

这是html代码

<h1>Simple Example of dynamically add and remove Tinymce 4</h1>

       <a class="add-type btn btn-primary pull-right" href="javascript: void(0)" tiitle="Click to add more"> Add More TextArea</a>
        </div>
        <div id="type_container">
            <div class="row" id="edit-0">
                    <label for="username" class="control-label">
                        Description :
                    </label>
                    <br>
                    <textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
                    <br>
            </div>
        </div>
    </div>
    <div id="type-container" class="hide">
        <div class="type-row" id="">
                <label for="username" class="control-label">
                    Description :
                </label>
                <br>
                <textarea class="tinymce-enabled-message-new" cols="90" rows="10" id="">Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida.</textarea>
                <a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)">delete</a>
                <br>
        </div>
    </div>

Answer 1

评论后更新答案:

这是一个工作片段，我在代码中留下了注释。

// I removed document ready because it's useless: your events are binded to elements.

$('a.add-type').off('click').on('click', function(e) {
  e.preventDefault();
  var content = jQuery('#type-container.hide .type-row'),
    element = null;
  for (var i = 0; i < 1; i++) {
    element = content.clone();
    var divId = 'id_' + jQuery.now();
    // These below are useless if you use my suggestion on click
    // element.attr('id', divId);
    // element.find('.remove-type').attr('targetDiv', divId);
    // element.find('.tinymce-enabled-message-new').attr('id', 'txt_' + divId);
    // I don't know what you're doing with your "md_checkbox_…", so I didn't change the below lines.
    element.find('input:checkbox').attr('id', 'md_checkbox_' + divId);
    element.find('label').attr('for', 'md_checkbox_' + divId);
    element.appendTo('#type_container');
  }

  // Here, we bind (or rebind) the on click for the delete buttons, because there is a newly created one.
  jQuery(".remove-type").off('click').on('click', function(e) {
    if (confirm("Are you sure you want to delete?")) {
      //var id = jQuery(this).attr('data-id');
      //var targetDiv = jQuery(this).attr('targetDiv');
      //jQuery('#' + targetDiv).remove();

      // If your html structure is always the same,
      // here is a suggestion instead of all the above complicated code
      jQuery(this).parent().remove();
      return true;
    }
    return false;
  });

});

.hide {
  display: none;
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>

<body>
  <!-- There were 2 unused closing div tags in your code -->
  <h1>Simple Example of dynamically add and remove Tinymce 4</h1>
  <a class="add-type btn btn-primary pull-right" href="javascript: void(0)" title="Click to add more"> Add More TextArea</a>
  <div id="type_container">
    <div class="row" id="edit-0">
      <label for="username" class="control-label">Description :</label>
      <br>
      <textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
      <br>
    </div>
  </div>
  <div id="type-container" class="hide">
    <div class="type-row" id="">
      <label for="username" class="control-label">Description :</label>
      <br>
      <textarea class="tinymce-enabled-message-new" cols="90" rows="10" id="foo">Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida.</textarea>
      <a class="remove-type pull-right" targetDiv="foo" data-id="0" href="javascript: void(0)">delete</a>
      <br>
    </div>
  </div>
</body>

这是否如您所愿？
不管怎样，希望对你有帮助。

·
⋅
⋅

旧答案(评论前):

据我所知，这是一个工作片段。

jQuery(".remove-type").off('click').on('click', function(e) {
  if (confirm("Are you sure you want to delete?")) {
    var id = jQuery(this).attr('data-id');
    console.log(id); // for testing purpose
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#' + targetDiv).remove();
    return true;
  }
  return false;
});

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>

<body>
  <a class="remove-type btn btn-danger waves-effect pull-right" targetDiv="foo" data-id="0" href="javascript: void(0)"><i class="material-icons">delete foo</i></a>
  <br>
  <br>
  <textarea id="foo" rows="4" cols="50">foo textarea</textarea>
</body>

如有需要补充或修改的地方，请留言。
如果您认为我们在回答时没有得到什么信息，请更新您的问题。

请注意，在此答案中，需要事先使用相同名称插入 targetDiv 属性和 textarea id。

希望有帮助。