如何从 jQuery 中的所有段落中删除所有子节点？

在本文中，我们将学习如何从 jQuery 中的所有段落中删除所有子节点。子节点是段落的子标签。在这里，我们的任务是从 DOM 中的

标记中删除所有子标记。我们可以使用不同的方法从 jQuery 中的所有段落中删除所有子节点。

方法 1：在这种方法中，我们将使用 detach() 方法从 dom 中删除选定的项目。我们监听按钮单击事件，然后我们使用 children 方法选择子元素并删除子节点。我们遵循以下步骤：

• 首先，我们使用 children() 方法选择子节点。
• 选择段落的所有节点后，我们使用 detach() 方法。

例子：

HTML

  

    
    
    
        How to remove all child nodes 
        from all paragraphs?
    

  

    
        GeeksForGeeks
    
  
    
        How to remove all child nodes from 
        all paragraphs in jquery
        
          
        
            This node will be removed by 
            the detach of jquery
        
    
  
    
        REMOVE
    
  
    
  
        // jQuery for deleting child node
        $("button").click(function () {
            $("p").children().detach();
        });
    

  

输出：

使用分离删除节点

方法 2：在这个方法中，我们将使用 remove() 方法，该方法用于删除所选元素的所有元素，包括所有数据和事件。在这里，当我们单击按钮时，jQuery 会选择所有具有子节点的子节点并为所选项目运行删除函数。我们遵循以下步骤：

• 首先我们创建一个运行该函数的点击事件。
• 它在段落标签上使用 children()函数来选择所有节点。
• 最后在段落的选定子节点上应用 remove() 方法。

例子：

HTML

  

    
    
  
    
        How to remove all child nodes 
        from all paragraphs?
    

  

    
        GeeksForGeeks
    
  
    
        How to remove all child nodes from 
        all paragraphs in jquery
        
  
        
            This node will be removed by the 
            remove method of jquery
        
        
  
        
            For removing we use remove 
            function of jQuery 
        
    
  
    
        REMOVE
    
  
    
  
        // jQuery for deleting child node
        $("button").click(function () {
            $("p").children().remove();
        });
    

  

输出：

使用 remove 删除节点

方法 3：在此方法中，我们将使用 empty() 方法，该方法是用于删除所有节点及其所选项目内容的内置函数。 children方法用于选择段落的所有子节点。我们遵循以下步骤：

• 我们首先等待 dom 加载然后运行该函数。
• 函数监听按钮点击事件，然后运行函数。
• 函数使用 children()函数选择段落的所有子节点。
• 并且被选择的元素被 empty()函数删除。

例子：

HTML

  

    
    
      
    
        How to remove all child nodes 
        from all paragraphs?
    

  

    
        GeeksForGeeks
    
  
    
        How to remove all child nodes 
        from all paragraphs in jquery
        
  
        
            This node will be removed by 
            the empty method of jquery
        
        
          
        
            
                For removing we use Empty 
                function of jQuery 
            
        
    
  
    
        REMOVE
    
  
    
  
        // jQuery for deleting child node
        $(document).ready(function () {
            $("button").click(function () {
                $("p").children().empty();
            });
        });
    

  

输出：

删除空节点