如何检查是否在树枝中单击了按钮？

Question

我想在我的 twig 文件中的表格中有一个按钮，用于从数组中删除一个元素，最好是索引。

在我所做的研究中，我不断发现任何数据操作都应该保留在控制器中。我确定我可以使用 jquery 完成我的解决方案，但这不会违反数据操作规则吗？或者应该在控制器中做些什么？我尝试查看按钮是否使用 POST 设置，但没有奏效......

基本上，一旦单击此按钮，相应元素的索引就会从数组中删除。我怎样才能以最好的方式做到这一点？

另外，我只看过一些关于 jquery 的教程，所以我是一个完整的初学者。如果没问题，我该如何使用 jquery 来完成呢？

我对 jquery 的尝试：

cartArray.splice($.inArray(removeItem, cartArray), [0]); 

...其中 0 是索引...我知道这不起作用，因为我需要索引才能知道正在选择哪个元素。

在树枝文件中：

            <tbody>
                {% for key, cartValue in cartArray %}
                    <tr>
                        <td>{{ cartValue[0] }}</td> <!--Product-->
                        <td>{{ cartValue[1] }}</td> <!--Quantity-->
                        <td>${{ cartValue[2] }}</td> <!--Price Per Unit-->
                        <td>
                            <button type="button" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </button>
                        </td>
                    </tr>
                {% endfor %}    
            </tbody>

我应该提到我也在使用引导程序。

在控制器中：

$cartArray = array();

    if (is_null($cartArray) || !$entity) {
        throw $this->createNotFoundException('Error: Nothin in Array/Entity');
    } else {
        $cartArray = $session->get('cartArray', []);

        $cartArray[$entity->getId()] = [$entity->getName(), $entity->getQuantity(), $entity->getPrice()];

        foreach ($cartArray as $key => $product) {
                // dump($cartArray); die;
                // dump($key); die;
                $productEntity = $em->getRepository('PaTShopTestBundle:Product')->find($key);
                $quantity = $productEntity->getQuantity();
                $price = $productEntity->getPrice();
                $totalCostOfAllProducts += $price * $quantity;
        }
    }

    //$remove = unset($cartArray);

    // if (isset($_POST['Button'])) {
    //     unset($cartArray[1]); //remove index
    // }



    $session->set('cartArray', $cartArray); //session---------------

    //var_dump($cartArray); die;

    return array(
        'price'     => $price,
        'quantity'  => $quantity,
        'totalCostOfAllProducts'   => $totalCostOfAllProducts,
        'cartArray'   => $cartArray,
        'entity'      => $entity,
        'delete_form' => $deleteForm->createView(),
    );

非常感谢任何帮助，再次感谢！

Answer 1

希望这会有所帮助：

//  Simple variables, one for building a sentence from the array
//  and one that will be our element array
var sentence = '',
    araEle = $('li');

//  first I build the sentence for display before any removal
araEle.each(function(i) { sentence += (i>0?' ':'') + $(this).text(); });
//  here i use a simple jQuery/css selector to get the first fieldset's p tag
$('fieldset:first p').text(sentence);

//  here will pretend our button was clicked and our index is 4
var index = 4;
//  this is simple, old fashioned vanilla JS, 
//  there is no better jQuery alternative, 
//  which is why they didn't make one.
//  the first param is the zero based index value
//  the second param is how many to count from there
//  second value is 1 if you only want to remove the one item AT index
var returnsValue = araEle.splice(index, 1);
//  and as the variable assigned says
//  if you get a return from it, it will be the item,
//  in this case an element,
//  at that index
//  SO, if you wanted to remove the element itself afterward you could say:
$(returnsValue).remove();

//  reset our sentence string
sentence = '';
//  rebuild our sentence
araEle.each(function(i) { sentence += (i>0?' ':'') + $(this).text(); });
//  again simple jQuery/css selector to get the last fieldset's p tag
//  and display new sentence
$('fieldset:last p').text(sentence);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="zero">This</li>
  <li id="one">is</li>
  <li id="two">jusT</li>
  <li id="three">a</li>
  <li id="four">[TesT]</li>
  <li id="five">lisT</li>
 </ul>
<fieldset>
  <legend>Sentence Before Array Removal</legend>
  <p></p>
</fieldset>
<fieldset>
  <legend>Sentence After Array Splice at Index 4(TesT)</legend>
  <p></p>
</fieldset>