How to remove parent element except its child element using jQuery ?

How to select direct parent element of an element in jQuery ?

Last Updated : 17 May, 2023

In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and returns that element.

Syntax:

$(selector).parent()

Example: Here is the implementation of the above method.

HTML

<!DOCTYpe html>
<html>
<head>
    <title>
        How to select direct parent element
        of an element in jQuery?
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("li").parent().css({
                color: "white",
                background: "green"
            });
        });
    </script>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        How to select direct parent element
        of an element in jQuery?
    </h3>

    <p>GeeksforGeeks Subjects List-</p>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
    </ul>
</body>
</html>

Output:

How to remove parent element except its child element using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to select all ancestors of an element in jQuery ?

In this article, we will select all the ancestor elements of an element in jQuery. To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverses all the levels up the selected el

How to select specific ancestors of an element in jQuery ?

In this article, we will select specific ancestor elements of an element in jQuery. To select the specific ancestor elements of an element, we use the parents() method. This method is used to find the parent elements related to the selected element. This parent () method traverse all the levels up t

How to select all sibling elements of an element using jQuery ?

In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same

How to select elements by attribute in jQuery ?

jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D

How to remove parent element except its child element using jQuery ?

Given an HTML document and the task is to remove the parent element except for its child element. Approach 1: Use contents() method to select all the direct children, including text and comment nodes for the selected element.Selected elements are stored in a variable.Now, use replaceWith() method to

How to Select a Range of Elements using jQuery ?

Given an HTML document with a range of similar elements and the task is to select a range of those elements with the help of JavaScript. There are two approaches that are discussed below with an example. Approach 1: First, select all elements of class = 'child' by jQuery selector then use slice() me

How to select an element by name with jQuery ?

Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values. Table of Content

How to get a DOM Element from a jQuery Selector ?

The Document Object Model (DOM) elements are something like a DIV, HTML, BODY element on the HTML page. A jQuery Selector is used to select one or more HTML elements using jQuery. Mostly we use Selectors for accessing the DOM elements. If there is only one particular unique element in the HTML page

How to select all next sibling elements of an element using jQuery ?

In this article, we will discuss how to select all the next sibling elements of an element using jQuery. To select all the next sibling elements of an element, we will use nextAll() method. The nextAll() method is used to find the next sibling elements of the selected element. The siblings are those

How to select element by ID in jQuery ?

In this article, we are going to see how to select the element by its id using jQuery. To learn about this topic one should have prior knowledge about HTML, CSS, JavaScript and jQuery. Using JavaScript: This question is also solved by a popular JavaScript method called document.getElementById() whic