Question

我在一系列div之后有一系列<div class="clear-both"></div>。

我想删除显示该复选框后显示的所有<div class="clear-both"></div>。

例如，

<input type="checkbox" value="male"> Male?

<div class="clear-both"></div>

如果用户选中该框，我希望其下方的<div class="clear-both"></div>消失。

页面上有大约十二个clear-both div的实例。

我假设我必须为每个复选框设置一个类，以便在用户选中该框时进行监听，但我不确定如何删除复选框下面的clear-both div。

感谢任何帮助，谢谢。

Answer 1

$('input[type=checkbox]').on('click', function() {
    $(this).next('div.clear-both').hide();
}):

Answer 2

我想删除任何显示内容在那个复选框出现之后。

您可以像这样使用next()：

$('input[type=checkbox]').click(function(){
   $(this).next('div.clear-both').remove();
});

这将删除所点击的复选框中的下一个div元素，无论点击哪个。

更多

http://api.jquery.com/next/

Answer 3

虽然使用jQuery / JavaScript很容易做到这一点，但你也不需要来使用JavaScript;可以使用CSS代替（取决于您的跨浏览器要求）：

.clear-both {
    height: 1em;
    background-color: #0f0;
}

input:checked + .clear-both {
    background-color: #00f;
}

JS Fiddle demo

注意，我之所以使用颜色更改只是因为我不确定您希望.clear-both可见/隐藏的状态。显然，根据您的需要调整风格。

为了进一步说明这种方法的局限性，就跨浏览器兼容性而言，根据Sitepoint，任何版本的Internet Explorer都不支持此功能（尽管它们只列出了IE版本8）。 / p>

但是Quirksmode clarifies that IE 9+支持:checked伪类。

Answer 4

如果你不想使用jQuery：

window.onload = function(){
  var elements = document.getElementsByTagName("input");
  for(var i=0;i<elements.length;i++) {
     var element = elements[i];
     if(element.type == "checkbox")
        element.onchange = function() { this.nextElementSibling.style.display = "none"; };
  }
};

Answer 5

使用next功能的两个建议仅适用于下面的一个div。你说你想要删除所有这些，所以你应该看看nextAll函数：

http://api.jquery.com/nextAll/

隐藏另一个div之后的div

5 个答案: