.empty() 在 jquery 中，仅从其父项中为空子项答案

【问题标题】：.empty() in jquery, empty child only from its parent.empty() 在 jquery 中，仅从其父项中为空子项
【发布时间】：2012-10-31 18:59:11
【问题描述】：

当我使用 $("child").remove() 或 $("child").empty() 时，它会从页面中删除所有子元素，我希望它只从一个父元素中删除子元素元素。这个页面上有更多的父类，所以当用户单击按钮类时，我是否只能从父类中删除内容.. button_parent 类与父类处于同一级别

<div class ="button_parent"><div class ="button"></div></div>
    <div class = "parent">

        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>
<div class ="button_parent"><div class ="button"></div></div>
    <div class = "parent">
        <div class ="button"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>
<div class ="button_parent"><div class ="button"></div></div>
    <div class = "parent">
        <div class ="button"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>
<div class ="button_parent"><div class ="button"></div></div>    
    <div class = "parent">
        <div class ="button"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>
<div class ="button_parent"><div class ="button"></div></div>
    <div class = "parent">
        <div class ="button"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>
<div class ="button_parent"><div class ="button"></div></div>    
    <div class = "parent">
        <div class ="button"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div>
        <div class= "child"></div> 
    </div>

【问题讨论】：

标签： jquery css parent children

【解决方案1】：

.remove() 删除元素，但 .empty 只是删除内容。无论如何..您需要使用parent 作为上下文删除child div

$('.parent').click(function () {
   $(this).find('.child').remove();
});

对于 HTML：

<div class ="button_parent"><div class ="button"></div></div>
<div class = "parent">

    <div class= "child"></div>
    <div class= "child"></div>
    <div class= "child"></div>
    <div class= "child"></div> 
</div>

你可以的

$('.button').click(function() {
    $(this).parent() //this will be .button_parent
           .next()   //next node is .parent
           .find('child')  //find all child in .parent 
           .remove()       //remove them
});

您可以使用.empty() 的.child div 是.parent 中唯一存在的div

【讨论】：

可以$('.child', this).remove();
如果我想点击父母内部的按钮类来删除内容怎么办。子元素和按钮在同一级别
你可以做$(this).parent().find('.child').remove()
这样做的一个潜在风险是，它仍然会变得通用，并且允许您对当前单击的任何部门执行此操作？这是他想要的吗？
@sayannayas 是的，我相信这就是他想要的......（无论如何我只能在用户点击时从父级删除内容）如果他想的话删除特定的孩子，然后他可以为.child编写一个处理程序点击并在child上执行$(this).remove()

【解决方案2】：

在这种情况下最好使用 id 而不是 css 选择器

给你想要维护这个操作的 div 一个明确的 id。你可以保持你的 classs 完整，只将 id 应用于你想要操作发生的 div

<div class = "parent" id="operation">
    <div class= "child"></div>
    <div class= "child"></div>
    <div class= "child"></div>
    <div class= "child"></div> 
</div>

【讨论】：