jQuery函数中的事件注册问题

Question

图像库是一组带有相应移除按钮的图像。这是一个包含两个图像的库的HTML代码：

<div class="image">
<img src="/kjzfbE.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="/d2JncW.jpg" alt="Second">
<button class="remove">X</button>
</div>

实现注册点击事件处理程序的设置函数，并实现以下逻辑：当类remove的按钮被点击时，它的父元素应该从库中删除。

例如，从上面的图库中删除第一个图像后，它的HTML代码应该如下所示：

<div class="image">
<img src="/d2JncW.jpg" alt="Second">
<button class="remove">X</button>
</div>

这是我写的代码。但是找不到bug。

function setup (ele) {
ele.remove();
}
// Example case. 
document.body.innerHTML = `
<div class="image">
<img src="/kjzfbE.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="/d2JncW.jpg" alt="Second">
<button class="remove">X</button>
</div>`;
//setup();
$(".remove").get(0).click('setup');
console.log(document.body.innerHTML);

Answer 1

使用jQuery&你的代码应该如下：

$(document).ready(function(){
$('.remove').click(function(){
$(this).parent().hide();
})
});

工作Fiddle

Answer 2

关于您的代码：

function setup (ele) {
ele.remove();
}
// Example case. 
document.body.innerHTML = `
<div class="image">
<img src="/kjzfbE.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="/d2JncW.jpg" alt="Second">
<button class="remove">X</button>
</div>`;
//setup();
$(".remove").get(0).click('setup');
console.log(document.body.innerHTML);

• 您不能将函数调用为字符串！('setup'(

• 点击不获取任何参数(.click('setup')->.click()(

• 如果元素没有附加事件，则不能执行任何操作

在下面的片段中抢劫：

(function ($) {
'use strict';

$(function () {
// your setup function
function setup () {
// simple remove
//      $(this).closest('.image').remove();

// with animation
var self = this;
$(this).closest('.image').fadeOut(300, function () {
$(this).remove();
});
}

$('.remove').on('click', setup);
});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<img src="https://picsum.photos/id/5/200/200" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="https://picsum.photos/id/12/200/200" alt="Second">
<button class="remove">X</button>
</div>