2013-03-20 2 views
2

У меня есть форма, которую я хотел бы разрешить пользователям добавлять любое количество полей, а затем вставлять информацию, которую они дают мне в базу данных. Если есть какие-либо строки, которые не используются, они могут удалить их, нажав на удаленный текст, чтобы у меня не было пустых пустых строк в моей базе данных.jQuery remove() не удаляет

Я выполнил добавление строк с jQuery и вставку данных в базу данных, но я борется с удалением нежелательных строк. Когда jQuery запускает функцию remove(), она просто дает tr отображение ни одного, делающего это так, чтобы пользователь не мог видеть строки, но они все еще существуют, и вставляют пустые строки в мою базу данных. Есть ли способ полностью избавиться от всей строки в моей таблице, чтобы пустые данные не могли быть введены?

Вот мой код:

Html:

<table width="960px" border="0" id="entries"> 
<tr> 
    <td><b></b></td> 
    <td><b>Department</b></td> 
    <td><b>Class</b></td> 
    <td><b>Lot #</b></td> 
    <td><b>Short Description</b></td> 
</tr> 

<tr> 
    <td><b>1</b></td> 
    <td class="firstEntry"><input type="text" name="fields[]"></td> 
    <td><input type="text" name="class[]"></td> 
    <td><input type="text" name="lot[]" size="5"></td> 
    <td><input type="text" name="description[]" size="86"></td> 
    <td></td> 
</tr> 

<div id="container"> 
<p id="add_field"><a href="#"><span>Add Entries.....</span></a></p> 

JQuery:

<script type="text/javascript"> 
var count = 0; 
$(function(){ 
    var count = 1; 
    $('p#add_field').click(function(){ 

     count +=1; 

    $('table#entries').append(
     '<tr><td><strong>' + count + '</strong></td>' + 
     '<td><input id="department_' + count + '" name="fields[]' + '" type="text" /></td>' + 
     '<td><input id="class_' + count + '" name="class[]' + '" type="text" /></td>' + 
     '<td><input id="lot_' + count + '" name="lot[]' + '" type="text" size="5"/></td>' + 
     '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' + 
     '<td><span class="delete">Remove</span></td></tr>'); 

    $(".delete").click(function() { 
     $(this).closest('tr').remove("slow"); 
    }); 

    }); 



}); 

+2

удалить не может принимать медленно, как пары. remove - это правильный метод и будет делать именно то, что вы хотите, если будете использовать его правильно. если вы хотите определить скорость, с которой она визуально удалена, попробуйте использовать fadeOut («slow»), а затем удалите ее, как только она исчезнет. http://api.jquery.com/remove/ – iAmClownShoe

+0

вам нужно сделать два события в вашем, что затушевывает часть, и то, что делает удаление. – mcgrailm

ответ

2

Он работает без "медленных":

$(".delete").click(function() { 
     $(this).closest('tr').remove(); 
    }); 

http://jsfiddle.net/kn3eB/

Аргумент .remove() является селектором. Возможно, вы думаете о .hide(), который имеет длительную скорость.

+0

Я только что скопировал и вставил код jquery из jsfiddle в свой оригинал и он работает сейчас. Я не уверен, что я ошибся в своем коде, но он работает ... Спасибо всем за ответ и быстрый ответ! – user2191829

2

.remove() не принимает эффект анимации как параметр, а только селектор. Возможно, вы путаете его с .fadeOut(), который изменяет свойства непрозрачности и отображения?

Попробуйте jsFiddle example

$(this).closest('tr').fadeOut(function() { 
    $(this).remove() 
}); 
+0

Спасибо за помощь. Я удалил медленный, но он все равно отображает tr. Вот скриншот того, что я получаю ... http://cachecounty.org/assets/jquery-remove.PNG – user2191829

Смежные вопросы