javascript - Remove two items at once using removeChild() jquery -
i want remove 2 elements list (last-child , before-last-child) @ once. i'm using jquery removechild() still can't remove 2 items @ once.
explanation: have x dots. when click on (x-1) dot make dot (x-1) , x removed list. otherwise if click on last (x) dot make 1 dot removed.
my js:
$(document).ready(function() { var dots = 12; var child = document.getelementbyid("stack"); $('.dot').click(function(){ $(this).data('clicked', true); if($('.dot:eq(-1)').data('clicked')){ child.removechild(this); dots -= 1; } if($('.dot:eq(-2)').data('clicked') && $('.dot:eq(-1)').data('clicked')) child.removechild(this); dots -= 2; } if(dots == 0) { alert("end"); } }); }); my html:
<div id="board"> <ul id="stack"> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ul> </div> my css:
.dot { background: none repeat scroll 0 0 #bc0000; border-radius: 35px; display: inline-block; cursor: pointer; float: left; height: 50px; width: 50px; margin-bottom: 30px; margin-right: 5px; margin-top: 15px; trasition: background 0.2s ease 0s; } #stack { overflow: hidden; } i appreciate if me.
cheers
given clarification want remove clicked .dot element , subsequent siblings, i'd suggest:
// selecting elements class-name of 'dot', // binding anonymous 'click' event-handler: $('.dot').on('click', function() { // clicked element: $(this) // getting later <li> elements // class-name of 'dot': .nextall('li.dot') // adding selected element // collection: .addback() // fading elements out, remove() // used instead, fadeout() // chosen show elements // being removed: .fadeout(); }); $('.dot').on('click', function() { $(this).nextall('li.dot').addback().fadeout(); });.dot { background: none repeat scroll 0 0 #bc0000; border-radius: 35px; display: inline-block; cursor: pointer; float: left; height: 50px; width: 50px; margin-bottom: 30px; margin-right: 5px; margin-top: 15px; transition: background 0.2s ease 0s; } #stack { overflow: hidden; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="board"> <ul id="stack"> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ul> </div>alternatively, plain javascript, above can accomplished with:
// named function handle removal, // event argument passed automagically // addeventlistener() method: function removeallnext (event) { // getting clicked element: var clicked = event.target, // getting parent of // clicked element: parent = clicked.parentnode; // while clicked element has // next-sibling: while (clicked.nextsibling) { // remove nextsibling // parent of clicked element: parent.removechild(clicked.nextsibling); } // remove clicked element: parent.removechild(clicked); } // getting element id equal 'stack': document.getelementbyid('stack') // binding removeallnext() function // event-handler click events: .addeventlistener('click', removeallnext); function removeallnext (event) { var clicked = event.target, parent = clicked.parentnode; while (clicked.nextsibling) { parent.removechild(clicked.nextsibling); } parent.removechild(clicked); } document.getelementbyid('stack').addeventlistener('click', removeallnext);.dot { background: none repeat scroll 0 0 #bc0000; border-radius: 35px; display: inline-block; cursor: pointer; float: left; height: 50px; width: 50px; margin-bottom: 30px; margin-right: 5px; margin-top: 15px; transition: background 0.2s ease 0s; } #stack { overflow: hidden; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="board"> <ul id="stack"> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ul> </div>or, instead:
function removeallnext(event) { var clicked = event.target, parent = clicked.parentnode, // retrieving child-elements of parent, // using array.prototype.slice(), // function.prototype.call(), convert // nodelist (parent.children) array in // order use array methods: children = array.prototype.slice.call(parent.children, 0), // retrieving index of clicked element // using array.prototype.indexof(): index = children.indexof(clicked); // if element wasn't found, array.prototype.indexof() // returns -1; here check ensure clicked // element found before acting: if (index > -1) { // slice array elements // index of clicked element onwards, // , iterate on array /// array.prototype.foreach(): children.slice(index).foreach(function(child) { // first argument of anonymous function // (here: 'child') represents current array- // element of array on we're iterating: // removing current child parent: parent.removechild(child); }); } } document.getelementbyid('stack').addeventlistener('click', removeallnext); function removeallnext(event) { var clicked = event.target, parent = clicked.parentnode, children = array.prototype.slice.call(parent.children, 0), index = children.indexof(clicked); if (index > -1) { children.slice(index).foreach(function(child) { parent.removechild(child); }); } } document.getelementbyid('stack').addeventlistener('click', removeallnext);.dot { background: none repeat scroll 0 0 #bc0000; border-radius: 35px; display: inline-block; cursor: pointer; float: left; height: 50px; width: 50px; margin-bottom: 30px; margin-right: 5px; margin-top: 15px; transition: background 0.2s ease 0s; color: #fff; text-align: center; line-height: 50px; font-weight: bold; } #stack { overflow: hidden; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="board"> <ul id="stack"> <li class="dot">1</li> <li class="dot">2</li> <li class="dot">3</li> <li class="dot">4</li> <li class="dot">5</li> <li class="dot">6</li> <li class="dot">7</li> <li class="dot">8</li> <li class="dot">9</li> <li class="dot">10</li> <li class="dot">11</li> <li class="dot"></li> </ul> </div>references:
- javascript:
- jquery:
Comments
Post a Comment