Geek asks and answers

Delete a div using the arrow key

I have five questions, and each question is hidden in the field with the number 1-5, after the user selects a number from 1 to 5, a window appears with a question. And I want to know how to remove the selected checkbox if the user presses the right key, and if the left key will do nothing but a large pop-up X mark.

<script type="text/javascript">
            function Question1(){
             document.getElementById('Question').innerHTML = 'Question#1';
            }
            function Question2(){
             document.getElementById('Question').innerHTML = 'Question#2';
            }
            function Question3(){
             document.getElementById('Question').innerHTML = 'Question#3';
            }
            function Question4(){
             document.getElementById('Question').innerHTML = 'Question#4';
            }
            function Question5(){
             document.getElementById('Question').innerHTML = 'Question#5';
            }

            function showArrowKey(e) {
            arrowKey = e.which||e.keyCode;
            switch(arrowKey) {
                case 37: //left key
                    //Do nothing just pop up Big X mark
                    break;
                case 39: //right key
                    // Remove the selected div, and pop up Check mark
                    break;
            }
        }

    </script>
<div class = "container">
        <div id = "CompleteImage">
            <div  class = "squareInside" id="trigger-overlay1" onclick='Question1()'>1</div>
            <div class = "squareInside" id="trigger-overlay2" onclick='Question2()'>2</div>
            <div class = "squareInside2" id="trigger-overlay3"onclick='Question3()'>3</div>
            <div class = "squareInside2" id="trigger-overlay4"onclick='Question4()'>4</div>
            <div class = "squareInside2" id="trigger-overlay5"onclick='Question5()'>5</div>

        </div>
    </div>   <!-- container --> 
    <div class="overlay overlay-door" >
        <button type="button" class="overlay-close">Close</button>
        <nav>
            <ul>
                <li><p id='Question' ></p></li>
            </ul>
        </nav>
    </div>
+3
source share
1 answer

Using jQuery to remove an element, in this case a div, use:

$('div').remove();

Then, to show the checkmark, use it as another element, possibly below the div with CSS: display:none; Then, after removing the div, open it again with jQuery

$('checkMark').show();
+1
source

More articles:


All Articles