时间戳

首页 > 解决方案 > jQuery控制动态元素创建

javascript - jQuery控制动态元素创建

问题描述

在这里，我面临的问题是，当我附加文件时，为所有输入文件动态创建删除按钮。我需要附加哪个输入字段，仅为该字段创建一个删除按钮。如何控制单个输入字段？

$(document).on('change', ".wpcf7-file", function() {
    $('span:not(:has(button))').append('<button class="removeButton" type="button">remove</button>');
});

$(document).on('click', ".removeButton", function() {
    var file = this.previousSibling.value = '';
    $(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap file-226"><input type="file" name="file-226" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png" aria-invalid="false"></span>
<br>
<span class="wpcf7-form-control-wrap file-227"><input type="file" name="file-227" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png" aria-invalid="false"></span>
<br>

标签： javascriptjqueryhtml

解决方案

由于当前单击的元素是输入元素，因此您只需定位最接近的 SPAN元素。

尝试以下选择器：

$(this).closest('span:not(:has(button))')


$(document).on('change', ".wpcf7-file", function() {
  if(this.value.length) { // check if length not falsy
    $(this).closest('span:not(:has(button))').append('<button class="removeButton" type="button">remove</button>');
  }
  else
    $(this).next('.removeButton').remove(); // remove the button when cancel button is clicked
});
$(document).on('click', ".removeButton", function() {
  var file = this.previousSibling.value = '';
  $(this).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap file-226"><input type="file" name="file-226" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png" aria-invalid="false"></span>
<br>
<span class="wpcf7-form-control-wrap file-227"><input type="file" name="file-227" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png" aria-invalid="false"></span>
<br>

推荐阅读