Question

我想使用jQuery创建html对象，然后通过jQuery / javascript再次将其删除，但是我遇到了问题，因为加载页面时这些对象不存在。您对我如何解决此问题有任何想法吗？预先感谢。

（这是我关于stackoverflow的第一篇文章-我希望我做的一切都不错^^）

<body>
  <div id='ipt-list'>
  </div>
  <input type="submit" id="btn-add" value="Add">
</body>

function rmInput(){
  $(this).parent().remove();
    return false;
}
$(function(){
  $('#btn-add').on('click', function(){
        ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput();" class="btn-rm" value="Remove"></div>';
        $('#ipt-list').append(ipt);
        return false;
  });
});

Answer 1

this是指Window对象，而不是您正在考虑的元素。

您必须将this传递给函数，以便您可以在函数内部引用它：

onclick="rmInput(this);"

function rmInput(el){
  //console.log(this.constructor.name); // Window
  $(el).parent().remove();
  return false;
}

$(function(){
  $('#btn-add').on('click', function(){
    ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput(this);" class="btn-rm" value="Remove"></div>';
    $('#ipt-list').append(ipt);
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">

Answer 2

问题是因为您使用的是过时的onclick属性。在该函数中，它调用this将引用window，而不是引发事件的元素。

要解决此问题并改善逻辑，请删除内联事件处理程序并改用委托的处理程序：

jQuery(function($) {
  $('#btn-add').on('click', function() {
    let ipt = '<div><input type="text" value=""><input type="button" class="btn-rm" value="Remove"></div>';
    $('#ipt-list').append(ipt);
  });

  $('#ipt-list').on('click', '.btn-rm', function() {
    $(this).parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ipt-list"></div>
<input type="button" id="btn-add" value="Add">

还要注意，我将两个按钮都更改为type="button"。如果您要在两种情况下都取消活动，则submit类型将变得多余。

Answer 3

由于您使用的是jQuery，因此无需放置内联onclick事件。

$(function(){
  $('#btn-add').on('click', function(){
		ipt = '<div><input type="text" value=""><input type="submit" class="btn-rm" value="Remove"></div>';
		$('#ipt-list').append(ipt);
		return false;
  });
  
  $('#ipt-list').on('click', '.btn-rm', function(){
		$(this).parent().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id='ipt-list'>
  </div>
  <input type="submit" id="btn-add" value="Add">
</body>

修改由jQuery创建的输入

3 个答案: