如何删除（而不是删除）动态生成的表元素？

Question

Hi I have looped and echoed out this result

echo '<tr><td id="'.$row['productID'].'"><img height="150px" width="130px" 
src="products/'.$row['image_url'].'"></td><td>'.$row['name'].'</td>
<td>'.$row['price'].'</td></tr>';

The above resulted in a table full of data, now How do i remove a specific row, I want to remove it not delete from the table, as in a shopping cart where you remove the item but not delete it from the table. How would you use javascript or any other in this case?

Thank you very much.

Answer 1

Make a extra field in table.

Default value for the active Row is 1....

deactive row is value is 0

When retrieve the data form table used the where function for the Active rows

Answer 2

Give it a id and using jQuery do as

$('yourid').hide(); // to hide

$('yourid').show(); // to show

Answer 3

请不需要JQuery这样简单的东西。

document.getElementById('id_off_product').style.display = 'none'; 

Answer 4

You don't need jQuery to do this, although you can use it if you want.

If you want to hide the product:

document.getElementById('product_id').style.display = 'none';

With jQuery:

$('#product_id').hide();

If you want to show it again:

document.getElementById('product_id').style.display = '';

With jQuery:

$('#product_id').show();

If you want to completely remove the product:

document.getElementById('product_id').remove();

With jQuery:

$('#product_id').remove();

Also, you should probably put the id on the actual table row ( tr ) instead of on the table cell ( td ).

Answer 5

skimberk1's answer is most comprehensive. Here is an example that would allow a button on the row that would remove the row (parent/tr).

<table id="test">
    <tr>
        <td>one</td><td>two</td><td id="test" onclick="removerow(this);">remove</td>
    </tr>
</table>

function removerow(e) {
    e.parentNode.remove();
}

http://jsfiddle.net/FqbHW/19/embedded/result/

If completely removing is not desirable, then hiding or otherwise indicating it's inactive is possible... I would in that case also point you to Taveer's answer. You would need to track which rows are active/inactive. If you need additional details on this please comment.

Answer 6

如果您使用jquery，则必须知道要删除的产品ID

$('td#productId').parent().hide();