Question

以下代码使我能够删除动态添加的tinymce文本框。不幸的是它只适用于jquery verions 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

评论后更新了答案：

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

for (int i = 0; i < list.size(); i++) {

            Marker marker;
            marker = gMap.addMarker(new MarkerOptions().position(new LatLng(list.getLat(), list.getLng()))
                        .icon(BitmapDescriptorFactory.fromResource(R.mipmap.location_other))
                        .flat(true));
           }

// 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一起插入。

希望它有所帮助。

Answer 2

Html代码：

<a class="remove-type btn btn-danger waves-effect pull-right" targetDiv="testDiv" data-id="0" href="javascript: void(0)"><i class="material-icons">delete</i></a>

<div id="testDiv">test</div>

在最新的jQuery版本代码中：

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).data('id');
        var targetDiv = jQuery(this).data('targetDiv');
        jQuery('#' + targetDiv).remove();
        return true;
    } else {
        return false;
    }
});

使用jQuery函数.data('< attribute-name >')来访问自定义属性。

在链接下方了解更多信息。

https://api.jquery.com/data/

使用动态添加的按钮删除动态添加的TinyMCE文本框

2 个答案: