时间戳

首页 > 解决方案 > 修改由 jQuery 创建的输入

javascript - 修改由 jQuery 创建的输入

问题描述

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

（这是我在 stackoverflow 上的第一篇文章 - 我希望我做的一切都是正确的 ^^）

https://jsbin.com/yudamofoho/edit

<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;
  });
});

标签： javascriptjqueryhtml

解决方案

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">

推荐阅读