使用removeChild（）jquery一次删除两个项目

Question

我想一次从列表中删除两个元素（last-child和before-last-child）。我正在使用带有removeChild（）的jquery，但仍然无法一次删除两个项目。

说明： 我有X点。当您点击（X-1）点时，它将使点（X-1）和x 从列表中删除。否则，如果仅点击最后（X）点，则只会删除一个点。

我的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");
    }
});     

}); 

我的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>

我的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;
}

如果有人可以帮助我，我将非常感激。

干杯

Answer 1

鉴于您要删除所点击的.dot元素及其后续兄弟元素的说明，我建议：

// selecting the elements with a class-name of 'dot',
// binding an anonymous 'click' event-handler:
$('.dot').on('click', function() {
  // the clicked element:
  $(this)
    // getting all the later <li> elements with a
    // class-name of 'dot':
    .nextAll('li.dot')
    // adding the initially selected element
    // back to the collection:
    .addBack()
    // fading those elements out, remove()
    // could be used instead, fadeOut() was
    // chosen only to clearly show which elements
    // were being removed:
    .fadeOut();
});

＆＃13;

＆＃13;

$('.dot').on('click', function() {
  $(this).nextAll('li.dot').addBack().fadeOut();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者，使用纯JavaScript，可以通过以下方式完成上述操作：

// a named function to handle the removal,
// the event argument is passed automagically
// from the addEventListener() method:
function removeAllNext (event) {

  // getting the clicked element:
  var clicked = event.target,

      // getting the parent of the
      // clicked element:
      parent = clicked.parentNode;

  // while the clicked element has
  // a next-sibling:
  while (clicked.nextSibling) {

    // we remove that nextSibling from the
    // parent of the clicked element:
    parent.removeChild(clicked.nextSibling);
  }

  // we remove the clicked element:
  parent.removeChild(clicked);
}

// getting the element with an id equal to 'stack':
document.getElementById('stack')
  // binding the removeAllNext() function as the
  // the event-handler for click events:
  .addEventListener('click', removeAllNext);

＆＃13;

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者，改为：

function removeAllNext(event) {
  var clicked = event.target,
    parent = clicked.parentNode,

    // retrieving the child-elements of the parent,
    // using Array.prototype.slice(), with
    // Function.prototype.call(), to convert the
    // NodeList (parent.children) into an array in
    // order to use Array methods:
    children = Array.prototype.slice.call(parent.children, 0),

    // retrieving the index of the clicked element
    // using Array.prototype.indexOf():
    index = children.indexOf(clicked);

  // if the element wasn't found, Array.prototype.indexOf()
  // returns -1; here we check to ensure that the clicked
  // element was found before acting:
  if (index > -1) {
    // we slice the array to get all elements from
    // the index of the clicked element onwards,
    // and iterate over that Array with 
    /// Array.prototype.forEach():
    children.slice(index).forEach(function(child) {
      // the first argument of the anonymous function
      // (here: 'child') represents the current array-
      // element of the array over which we're iterating:

      // removing the current child from the parent:
      parent.removeChild(child);
    });

  }
}

document.getElementById('stack').addEventListener('click', removeAllNext);

＆＃13;

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• JavaScript的：
  • Array.prototype.forEach()。
  • Array.prototype.indexOf()。
  • Array.prototype.slice()。
  • document.getElementById()。
  • EventTarget.addEventListener()。
  • Function.prototype.call()。
  • Node.nextSibling。
  • Node.parentNode。
  • Node.removeChild()。
  • while (...) {} statement。
• jQuery的：
  • addBack()。
  • fadeOut()。
  • nextAll()。
  • on()。
  • remove()。

Answer 2

目前尚不清楚你究竟要做什么，但有几个明显的错误：

1. child.removeChild(this);使用相同的this调用2次。第一次通话后，这没有任何效果。您可能打算删除另一个.dot。
2. $('.dot:eq(-2), .dot:eq(-1)').data('clicked')不会为您提供“和”数据。它实际上会返回所选第一个项目的clicked数据（.dot:eq(-2)）。你可能打算做$('.dot:eq(-2)').data('clicked') && $('.dot:eq(-1)').data('clicked')。

Answer 3

建议 - 我假设您要删除所有内容，直到单击一下。不确定这是不是你想要的，但它会给你一个想法：

$(document).ready(function() {

    var child = document.getElementById("stack");

    $('.dot').click(function(){ 

        var dots = $('.dot').length; 
        var clicked_index = $(this).index()

        for(i=dots;i>=clicked_index;i--){
            $('.dot').eq(i).remove();
            if($('.dot').length == 0) {
            alert("End");
            }
        }

    })
});  

JSFIDDLE：https://jsfiddle.net/jg4gbu43/2/