jQuery Ajout et suppression de lignes Problème

Question

J'essaie de créer une nouvelle utilisation pour un outil déjà implémenté que nous utilisons ici au travail, mais je suis très sûr de faire quelque chose de mal.

Je n'arrive pas à comprendre comment faire pour supprimer une ligne. Et même plus, je peux comprendre comment tout cloner dans .pt-entry, et l'avoir répliqué à l'intérieur de l'entrée .pt-incremental ... mais sans les informations renseignées par l'utilisateur.

Espérons que cela a du sens.

Vous pouvez consulter mon Pen here, mais voici la répartition de code pour le reste de yous:

HTML:

<table class="manage-pt" id="0"> 
    <tr class="pt-entry"> 
     <td class="pt-toggle-group"> 
      <input type="button" class="pt-button togPTbutton" value="?" /> 
      <input type="button" class="pt-button addPTbutton" value="+" /> 
      <input type="button" class="pt-button delPTbutton" value="-" /> 
     </td> 
     <td class="pt-values"> 
      <div> 
       <input type="text" class="vendor" placeholder="Vendor Name" /> 
      </div> 
      <div> 
       <textarea class="ptCode" name="ptCode" placeholder="Pixel Tag Code" ></textarea> 
      </div> 
      <div class="page-select"> 
       <select> 
        <option value="AllPages">All Pages</option> 
        <option value="HomePage">HomePage</option> 
        <option value="VehicleDetailsPage">VehicleDetailsPage</option> 
        <option value="VehicleSearchResults">VehicleSearchResults</option> 
        <option value="ContactUsForm">ContactUsForm</option> 
       </select> 
      </div> 
      <div class="area-checkboxes"> 
       <p class="wheretosave">Where?</p> 
       <input type="checkbox" name="head" /><label for="head">Head</label> 
       <input type="checkbox" name="body" /><label for="body">Body</label> 
      </div> 
      <div class="save-pt"> 
       <input value="SAVE" type="submit" /> 
      </div> 
     </td> 
    </tr> 
</table> 

JavaScript:

// HIDES CURRENT PT & CHANGES TOGGLE BUTTON ICON WHEN CLICKED 
$('.togPTbutton').click(function(){ 
    $('.pt-values').slideToggle(25, function() { 
     if ($('.pt-values').is(':hidden')) { 
      $('input.togPTbutton').val('?'); 
     }else{ 
      $('input.togPTbutton').val('?'); 
     } 
    }); 
}); 

$(document).ready(function() { 
    var table = $('.manage-pt'), 
     rows = $(table).find('tr'), 
     rowCount = $(rows).length, 
     addedRow = $(document.createElement('tr')), 
     addButton = $('.addPTbutton'), 
     removeButton = $('.delPTbutton'); 

    function addRow(){ 
     var thisRow = $(addedRow).clone(true); 
     $(thisRow).attr('class','.pt-entry-' + rowCount); 
     rowCount += 1; 
     $(thisRow).html('<td>row</td>'); 
     $(table).append(thisRow); 
    } 

    function removeRow(){ 
     var items = $(table).querySelectorAll('tr'); 
     if (rowCount > 1) { 
      $(table).remove(items[rowCount - 1]); 
      rowCount -= 1; 
     }else{ 
      alert('CANNOT DELETE LAST ROW'); 
     } 
    } 

    addButton.click(function(e){ 
     addRow(); 
    }); 

    removeButton.click(function(e){ 
     removeRow(); 
    }); 
}); 

devrait chercher près de quelque chose comme cette maquette ...

Answer 1

D'accord, je pense avoir trouvé votre problème. Vous essayez d'appeler $(table).querySelectorAll('tr'). .querySelectorAll est une fonction javascript que vous utilisez avec un sélecteur JQuery. C'est là que vos bombes de fonction removeRow(). Essayez de commenter cette ligne. Ensuite, vous aurez besoin de trouver une nouvelle façon de sélectionner la dernière ligne, qui peut facilement être fait avec ceci:

$(table).find('tr:last').remove(); 

Forme finale:

function removeRow(){ 
    //var items = $(table).querySelectorAll('tr'); 
    if (rowCount > 1) { 
     //$(table).remove(items[rowCount - 1]); 
     $(table).find('tr:last').remove(); 
     rowCount -= 1; 
    } 
    else 
    { 
     alert('CANNOT DELETE LAST ROW'); 
    } 
} 

Si vous voulez que cela fonctionne dans IE8 et plus, vous pouvez utiliser cette JQuery puisque vous avez le nombre de lignes:

$(table).find('tr').eq(rowCount - 1).remove(); 

à la place de:

$(table).find('tr:last').remove(); 

jsFiddle: http://jsfiddle.net/Em8Q5/2/

EDIT: ------------------------------------- -----------------------------------------------

Très bien, j'ai trouvé une solution capable de supprimer la ligne actuelle.

Tout d'abord, laissez un paramètre dans votre fonction removeRow et mettez le sélecteur à utiliser closest:

function removeRow(currRow){ 
    //var items = $(table).querySelectorAll('tr'); 
    if (rowCount > 1) { 
     //$(table).remove(items[rowCount - 1]); 
     currRow.closest('tr').remove(); 
     rowCount -= 1; 
    } 
    else 
    { 
     alert('CANNOT DELETE LAST ROW'); 
    } 
} 

Ensuite, vous devrez modifier votre fonction .click afin qu'il changera dynamiquement lorsque vous ajoutez/supprimer des lignes/boutons. Notez également le paramètre afin qu'il sache quel bouton de la ligne est cliqué.

//removeButton.click(function(e){ 
$('body').on("click", ".delPTbutton", function(e) { 
    removeRow($(this)); //Note the parameter that we added so it knows which row to remove 
}); 

jsFiddle: http://jsfiddle.net/Em8Q5/3/

Answer 2

Je vérifie votre code à l'aide outil de développement de chrome et quand je clique sur le bouton delPTbutton pour enlever la dernière ligne il a montré une erreur dans votre méthode removeRow, le message d'erreur est:

(Uncaught TypeError: Object [object Object] n'a pas de méthode 'querySelectorAll')

Le problème est que 'querySelectorAll' est l'un des javascript api de base, mais vous l'utiliser après un objet jquery.

Envisagez d'utiliser $ (table) .find ('tr') à la place.

Answer 3

Ok, merci @Chad pour votre aide. Vous étiez sérieusement un épargnant de vie.

Je pris ce que vous avez fait, un peu plus loin dans cette nouvelle version du code:

New CodePen

Toutefois, j'ai maintenant un problème mineur très js. Je l'ai réglé pour transformer l'entrée ".vendor" en lecture seulement quand la pile correspondante est fermée, mais je dois cibler quelque chose d'autre que ".vendor", car cela affecte aussi chaque clone ".vendor".

Serait-ce quelque chose comme: $(this).parent().next().child().child();?