JavaScript removeChild

Javascript இல் removeChild() method இங்கு ஒரு குறிப்பிட்ட child element ஐ remove செய்வதற்கு பயன்படுகிறது.

parentNode.removeChild(childNode)

Note: இங்கு removeChild() method இல் ஒரு குறிப்பிட்ட child element ஐ remove செய்வதற்கு பயன்படுகிறது. இங்கு நாம் remove செய்யவேண்டிய child element ஐ select செய்து கொண்டு பிறகு removeChild method இல் அந்த child element ஐ argument ஆக அனுப்பும் போது அந்த child element ஆனது remove செய்யப்படுகிறது.

Example1


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript removeChild()</title>
</head>
<body>
    <ul id="animals">
        <li>Lion</li>
        <li>Tiger</li>
        <li>Elephant</li>
    </ul>
    <script>
        let menu = document.getElementById('animals');
        menu.removeChild(menu.lastElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு முதலில் remove செய்ய வேண்டிய child tag element அதாவது menu.lastElementChild என்ற method முறையில் select செய்து கொள்கிறோம். பின்பு removeChild(menu.lastElementChild) என்ற function இல் argument ஆக அனுப்பும் போது last child element அதாவது <li>Elephant</li> என்ற child element remove ஆகிறது.

Output: 

 
    
      
  • Lion
    • 
      
  • Tiger
    •

Example2


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript removeChild()</title>
</head>
<body>
    <ul id="birds">
        <li>Parrot</li>
        <li>Peacock</li>
        <li>Myna</li>
    </ul>
    <script>
        let menu = document.getElementById('birds');
        menu.removeChild(menu.firstElementChild);
    </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் ஒரு ul என்ற parent tag இல் மூன்று li tag கள் உள்ளது. இங்கு முதலில் remove செய்ய வேண்டிய child tag element அதாவது menu.firstElementChild என்ற method முறையில் select செய்து கொள்கிறோம். பின்பு removeChild(menu.firstElementChild) என்ற function இல் argument ஆக அனுப்பும் போது first child element அதாவது <li>Parrot</li> என்ற child element remove ஆகிறது.

Output: 
        
  • Peacock
    • 
        
  • Myna
    •

    Comments