دورة jquery للمبتدئين الدرس العاشر


فهاد الدرس العاشر من دورة jquery  للمبتدئين منبعد ما شفنا فالدرس السابق كيفاش زدنا des éléments فهاد الدرس غادي نشوفوا كيفاش نحيدو des éléments من داخل dés tags أولا نحيدو tag كاملة.


1- استعمال ل MÉTHODE remove ف JQUERY لإزالة المحتوى

ل MÉTHODE remove كتمكن باش نحيد des éléments ول contenu لي فيهم.
فالمثال لي عندنا زدنا div عطيناها ل class main منبعد بالكود jquery استرجعناها وبل méthode remove حيدناها هي ولمحتوى ديالها.
الكود لي زدنا هو : 

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, reprehenderit, qui, beatae vitae error tempore facere dolore porro exercitationem repellendus labore velit voluptates voluptatum quibusdam quos quam sequi! Nemo, necessitatibus?</p>
            <p>this is a paragraph</p>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('.main').remove();
        });
    </script>
</body>
</html>
                            

2- استعمال ل MÉTHODE empty ف JQUERY لإزالة المحتوى

ل  MÉTHODE empty كتمكن باش نحيد ل contenu لي فواحد ل élément.
فالمثال لي عندنا احتفظنا بنفس الكود السابق زدنا ل div لي عطيناها ل class main ل méthode empty لي كتحيد المحتوى لي فالوسط ولكن div كتبقى كيف كنشوف فالصورة :



الكود لي زدنا هو : 

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, reprehenderit, qui, beatae vitae error tempore facere dolore porro exercitationem repellendus labore velit voluptates voluptatum quibusdam quos quam sequi! Nemo, necessitatibus?</p>
            <p>this is a paragraph</p>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('.main').empty();
        });
    </script>
</body>
</html>
                            

3- إزلة محتوى معين

فالمثال لي عندنا احتفظنا بنفس الكود السابق وعطينا ل 2 p لي عندنا class paragraph و class lead فمثلا يلا بغيت نحيد غير هاد 2 p كنسترجع ل p بلكود jquery منبعد فوسط ل méthode remove كنحدد les deux classes.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>JQUERY COURSE</title>
</head>
<body>
    <div class="container">
        <div class="main">
            <h3>DCoding</h3>
            <p class="paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, reprehenderit, qui, beatae vitae error tempore facere dolore porro exercitationem repellendus labore velit voluptates voluptatum quibusdam quos quam sequi! Nemo, necessitatibus?</p>
            <p class="lead">this is a paragraph</p>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function(){
            $('p').remove(".paragraph,.lead");
        });
    </script>
</body>
</html>