How to delete the selected Div

here is simple image gallery Program . When we Click that particular div will be deleted  . it will delete all the div until the last Element.

Here is the Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #box1, #box2, #box3, #box4, #box5 {
            width:150px;
            height:150px;
            border:1px solid red;
            display:block;
                  }
        li {
    display: inline;
}

#box1{
    background-color:red;
}
#box2{
    background-color:blue;
}
#box3{
    background-color:pink;
}
#box4{
    background-color:green;
}
#box5{
    background-color:yellow;
}
    </style>

</head>
<body>
    <div id="myList">
        <ul>
           <li>
               <div id="box1"></div>
           </li>
             <li>
               <div id="box2"></div>
           </li>
             <li>
               <div id="box3"></div>
           </li>
             <li>
               <div id="box4"></div>
           </li>
             <li>
               <div id="box5"></div>
           </li>
        </ul>
      

    </div>
    <script>
       
        document.querySelector("#myList").addEventListener('click', function (e) {

            var removeNode = e.target.parentNode;
            console.log(removeNode)
           
            console.log(this)
            var howMany = this.querySelectorAll('li').length;
            console.log(howMany)
            if (howMany > 1) {
                removeNode.parentNode.removeChild(removeNode);
            }
            else {
                alert("This is last Element .. YOU Have to select THis One")
            }
        })
    </script>
       
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

HTML Attributes ....

Image
What is HTML Attributes and  why it is required ? We already Understood what is meant by HTML Tag . <html> is one tag , <body> is one tag, <header> is one tag . So if we want to give more information about the above mentioned tags , that moment we use Attributes . It means we can give more information by using Attributes , To understand more about HTML Attributes follow the link given here and find our more . HTML Attributes If you still not able understand how it can used and where it can be used   find out more here about the HTML Attributes here.
Read more

How to Study Web Developement Course

Image
 How to Study Web Developement Course Hi Friends, so you want to become the Web Developer or UI Developer Or Front End Developer. Right?. First thing i want to clear is Web Developer Front End Developer UI Developer all above mentioned Are same . We will do same work , It may be called with different names but  don't get confused . OK. Let us come to the Topic . How can we become UI developer . ? we know the Quality of the education in the small computer institutes . They wont pay proper salary to the instructions . Finding a good Instructor is really very difficult . I has personally experienced that . So it is really difficult to depend on a computer institute . So whats next . There are some websites offering web development course . But the Question is  can we really learn from those videos . I know about some people who can learn from the videos and online tutorials. I am not talking about those people . I am talking about the people who req...
Read more