时间戳

首页 > 解决方案 > 使用内联 jquery 代码删除父级和单击的按钮容器

jquery - 使用内联 jquery 代码删除父级和单击的按钮容器

问题描述

我有这段代码添加了一些表单和按钮

addAdditionalBedroom: function (n) {
      //this.bedrooms_number_container = this.bedrooms_number_container + 1;
      $("."+n).append("<div class='row blueDiv' id='"+n+"'><div class='col-md-4'> <label>Types Of Beds</label> <select class='form-control'><option>One</option><option>Two</option><option>Three</option><option>Four</option> </select> <br /></div><div class='col-md-4'> <label>Number Of Beds</label> <input type='number' class='form-control' placeholder='Number Of Beds'/></div><div class='col-md-4'> <br /><button id='"+n+"' class='btn btn-danger' onclick='$("+'#'+n+").remove()'>Delete</button></div></div>");
    },

当单击按钮时调用上面的函数，因此表单和按钮具有相同的 id（我知道我应该为此使用类）

我希望当单击按钮删除时，它执行一些内联​​ jquery 代码并删除整个 divblueDiv以及单击的按钮。

我的内联 jquery 代码看起来像这样

<button id='"+n+"' class='btn btn-danger' onclick='$("+'#'+n+").remove()'>Delete</button>

问题是，onclick 代码形式没有引号，也没有删除整个父级。我怎样才能解决这个问题？

接受的答案是正确的方法，尽管如果有人想保留内联代码，这就是为我解决的问题

addAdditionalBedroom: function (n) {
  //this.bedrooms_number_container = this.bedrooms_number_container + 1;
  $("."+n).append("<div class='row blueDiv' id='"+n+"'><div class='col-md-4'> <label>Types Of Beds</label> <select class='form-control'><option>One</option><option>Two</option><option>Three</option><option>Four</option> </select> <br /></div><div class='col-md-4'> <label>Number Of Beds</label> <input type='number' class='form-control' placeholder='Number Of Beds'/></div><div class='col-md-4'> <br /><button id='"+n+"' class='btn btn-danger' onclick='$(this).closest(`.row`).remove()'>Delete</button></div></div>");
},

标签： jquery

解决方案

不要使用内联 JS 代码、增量 id 或共享 id。所有这些都是反模式，导致的问题多于解决的问题。

为了实现您的目标，请删除重复的增量id属性，而是使用 DOM 遍历根据单击的“添加”按钮的位置添加内容。

此外，移除内联点击处理程序并为所有“删除”按钮使用单个委托事件处理程序，再次使用 DOM 遍历closest()方法查找最近的父.row元素并将其从 DOM 中移除。尝试这个：

let foo = {
  addAdditionalBedroom: function($container) {
    $container.append('<div class="row blueDiv"><div class="col-md-4"><label>Types Of Beds</label><select class="form-control"><option>One</option><option>Two</option><option>Three</option><option>Four</option> </select><br /></div><div class="col-md-4"><label>Number Of Beds</label><input type="number" class="form-control" placeholder="Number Of Beds"/></div><div class="col-md-4"><br /><button class="btn btn-danger btn-delete" type="button">Delete</button></div></div>');
  }
}

// add
$('.add').on('click', e => {
  let $house = $(e.target).closest('.house');
  foo.addAdditionalBedroom($house);
});

// remove
$(document).on('click', '.btn-delete', e => {
  $(e.target).closest('.row').remove();
});
.house {
  border: 1px solid #CCC; 
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="house">
  <button type="button" class="add">Add bedroom</button>
</div>
<div class="house">
  <button type="button" class="add">Add bedroom</button>
</div>
<div class="house">
  <button type="button" class="add">Add bedroom</button>
</div>

此外，在您的 JS 逻辑中包含这么多 HTML 也是违反最佳实践的。我建议使用模板库，甚至只是克隆 HTML 页面中的隐藏内容并从那里追加。不过，这对于这个问题来说有点离题。

推荐阅读