s0ren/stick_demo.html

## stick_demo.html
<html>
    <header>
        <style>
            #stickswrapper div img
            {
                display: inline;
            }


            #stickswrapper div img
            {
                border: 5px solid green;
            }

            #stickswrapper div:nth-child(2) img:nth-last-child(2)
            {
                border: 5px solid red;
            }

            #stickswrapper div:nth-child(2) img:nth-child(1)
            {
                border: 5px solid red;
            }

            #stickswrapper div img[src='stick.png']
            {
                border: 5px solid yellow;
            }

            #stickswrapper div img[style = 'display:inline']
            {
                border: 5px solid orange;
            }

            /*
            #stickswrapper div:nth-child(2)
            {
                border: 5px solid red;
            }
            */
        </style>
    </header>
    <body>
        <div id="stickswrapper">
            <div id="row0">
                <img src="stick.png" onClick="clickStick(event, 0)">
                <img src="stick.png" onClick="clickStick(event, 0)">
                <button onclick="clickRow(event, 0)">Fjern</button>
            </div>
             <div id="row1">
                <img src="stick.png" onClick="clickStick(event, 1)">
                <img src="stick.png" onClick="clickStick(event, 1)">
                <img src="stick.png" onClick="clickStick(event, 1)" style="display: inline;">
                <img src="stick.png" onClick="clickStick(event, 1)">
                 <button onclick="clickRow(event, 1)">Fjern</button>
            </div>
        </div>
        <script  type="text/javascript">

            var currentRow = null;

            function clickRow(event, row)
            {
                if (currentRow === null)
                {
                    currentRow = row;
                }

                if(row === currentRow)
                {
                    var billede = document.querySelector("#stickswrapper div:nth-child("
                        + (row+1) + ") img");
                    billede.parentNode.removeChild(billede);

                }
            }

            function clickStick(event, row)
            {
                if (currentRow === null)
                {
                    currentRow = row;
                }

                if(row === currentRow)
                {
                    event.currentTarget.style.display = "none";
                //this.style.display = "none";
//                var billede = document.querySelector("#stickswrapper div:nth-child(" + (row+1) + ") img:last-child");
//                billede.style.display = "none";
                }
            }
        </script>
    </body>
</html>
	<html>
	<header>
	<style>
	#stickswrapper div img
	{
	display: inline;
	}



	#stickswrapper div img
	{
	border: 5px solid green;
	}

	#stickswrapper div:nth-child(2) img:nth-last-child(2)
	{
	border: 5px solid red;
	}

	#stickswrapper div:nth-child(2) img:nth-child(1)
	{
	border: 5px solid red;
	}

	#stickswrapper div img[src='stick.png']
	{
	border: 5px solid yellow;
	}

	#stickswrapper div img[style = 'display:inline']
	{
	border: 5px solid orange;
	}

	/*
	#stickswrapper div:nth-child(2)
	{
	border: 5px solid red;
	}
	*/
	</style>
	</header>
	<body>
	<div id="stickswrapper">
	<div id="row0">
	<img src="stick.png" onClick="clickStick(event, 0)">
	<img src="stick.png" onClick="clickStick(event, 0)">
	<button onclick="clickRow(event, 0)">Fjern</button>
	</div>
	<div id="row1">
	<img src="stick.png" onClick="clickStick(event, 1)">
	<img src="stick.png" onClick="clickStick(event, 1)">
	<img src="stick.png" onClick="clickStick(event, 1)" style="display: inline;">
	<img src="stick.png" onClick="clickStick(event, 1)">
	<button onclick="clickRow(event, 1)">Fjern</button>
	</div>
	</div>
	<script type="text/javascript">

	var currentRow = null;

	function clickRow(event, row)
	{
	if (currentRow === null)
	{
	currentRow = row;
	}

	if(row === currentRow)
	{
	var billede = document.querySelector("#stickswrapper div:nth-child("
	+ (row+1) + ") img");
	billede.parentNode.removeChild(billede);

	}
	}

	function clickStick(event, row)
	{
	if (currentRow === null)
	{
	currentRow = row;
	}

	if(row === currentRow)
	{
	event.currentTarget.style.display = "none";
	//this.style.display = "none";
	// var billede = document.querySelector("#stickswrapper div:nth-child(" + (row+1) + ") img:last-child");
	// billede.style.display = "none";
	}
	}
	</script>
	</body>
	</html>