Question

当我使用$（“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>

Answer 1

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

删除parent 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

Answer 2

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

给你想要保持这个操作的div一个明确的id。你可以保持你的classess完好无损，只对你希望操作发生的div应用id

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

jquery中的.empty（），仅来自其父级的空子

2 个答案: