Question

我有动态生成的不同复选框。每个复选框都包含在div中。

我想用jquery执行以下操作：

如果复选框的id =“aucune”，则从html页面中删除其容器（包含id =“aucune”复选框的div）。

我尝试了以下代码：

// wait for DOM to be ready
$(document).ready(function() {
  var empty = $("input:checkbox[id=aucune]");
  if (empty == true) {
    $(this).parent().remove();
  }
});

这是一个非常简化的html：

<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
    <label for="xxx">xxx</label>
</div>

<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
    <label for="aucune">aucune</label>
</div>

Here is my codepen: 我对代码很陌生，我为我这个愚蠢的简单问题道歉。

Answer 1

您错误地引用了this。它应该是这样的：

将this替换为empty。
用计数替换布尔检查。
注意：您也可以使用$("#aucune")代替选择器$("input:checkbox[id=aucune]")。

// wait for DOM to be ready
$(document).ready(function() {
  // Or here you can also use $("#aucune").
  var empty = $("input:checkbox[id=aucune]");
  // Check if it is found.
  if (empty.length > 0) {
    // Remove the parent.
    empty.parent().remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
  <label for="xxx">xxx</label>
</div>

<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
  <label for="aucune">aucune</label>
</div>

轰！复选框消失了！ :)

Answer 2

您可以直接在JQuery中使用aucune id选择器，然后使用类div获取最接近的wrapper-checkbox以将其删除：

＆＃13;

$(document).ready(function() {
  var empty = $("#aucune");
  if (empty.length !== 0){
    $(empty).closest('.wrapper-checkbox').remove();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
    <label for="xxx">xxx</label>
</div>

<div class="wrapper-checkbox">
  <input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
    <label for="aucune">aucune</label>
</div>

＆＃13;

Answer 3

尝试这样做..

$(document).ready(function() {
  var checkbox = $("input:checkbox[id=aucune]");
  if (checkbox.length > 0) {
    checkbox.parent().remove();
  }
});

Answer 4

您可以使用jQuery直接选择id并删除父级。

$('#acune').parent().remove();

或者，如果你知道父元素的类

$('#acune').parent('.wrapper-checkbox').remove();

如何删除包含具有特定ID的复选框的div？

4 个答案: