Question

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

$(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>

Answer 1

由于当前单击的元素是输入元素，因此您只需定位closest() 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>

Answer 2

在下面的代码中进行更改，请检查：

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

});

将其更改为

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

});

Answer 3

您需要先将this转换为jQuery对象，然后才能在其上调用.siblings()，获得第一个同级并将其.val()设置为“”

$(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).siblings().first().val('');
    $(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>

jQuery控件动态元素创建

3 个答案: