想要刪除行onclick

嗨，我是新來的Javascript（實際上我工作在PHP的MySQL）。我想刪除幾個動態生成的行。我想傳遞元素id到函數，然後從那裏刪除。但是id是動態創建的。下面的代碼具有要顯示的行數的變量，並且應該刪除每行前面的按鈕，即該行中兩個輸入元素的按鈕onclick。想要刪除行onclick

<script> 
     function removeMore() 
     { 
      var elem = document.getElementById(); 
      elem.parentNode.removeChild(elem); 
      return false; 
     } 
    </script> 
</head> 

<body> 
    <?php 
     $row=5; 
     for($i=1; $i< $row; $i++) 
     { 
      $img_id= "img_".$i; 
      $cap_id= "cap_".$i; 
      $row_id= $i*100; 
      ?> 
       <table> 
        <tr id="<?php echo $row_id;?>"> 
         <td> 
          <input type="file" name="img[]" id="<?php echo $img_id;?>" /> 
         </td> 
         <td> 
          <input type="text" name="cap[]" id="<?php echo $cap_id;?>" /> 
         </td> 
         <td> 
          <input type="button" name="rem_but" id="<?php echo $i; ?>" value="<?php echo $i; ?>" onclick="removeMore(document.getElementsByName('rem_but')[0].value)" /> 
          <!-- or may be something like this.value to get value of id. --> 
         </td> 
        </tr> 
       </table> 
      <?php 
     } 
    ?>

我只是要刪除的按鈕被點擊

HTML看起來像這樣

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script> 
function removeMore(eid){ 
document.write(eid); 
var xd= eid*100; 
var elem = document.getElementById(xd); 
elem.parentNode.removeChild(elem); 
return false; 
} 
</script> 
</head> 

<body> 
<table> 
<tr id="100"><td><input type="file" name="img[]" id="img_1" /></td><td><input type="text" name="cap[]" id="cap_1" /></td><td><input type="button" name="rem_but" id="1" value="1" onclick="removeMore(document.getElementsById(this.value)" /> 
</td></tr> 
</table> 
<table> 
<tr id="200"><td><input type="file" name="img[]" id="img_2" /></td><td><input type="text" name="cap[]" id="cap_2" /></td><td><input type="button" name="rem_but" id="2" value="2" onclick="removeMore(document.getElementsById(this.value)" /> 
</td></tr> 
</table> 
<table> 
<tr id="300"><td><input type="file" name="img[]" id="img_3" /></td><td><input type="text" name="cap[]" id="cap_3" /></td><td><input type="button" name="rem_but" id="3" value="3" onclick="removeMore(document.getElementsById(this.value)" /> 
</td></tr> 
</table> 
<table> 
<tr id="400"><td><input type="file" name="img[]" id="img_4" /></td><td><input type="text" name="cap[]" id="cap_4" /></td><td><input type="button" name="rem_but" id="4" value="4" onclick="removeMore(document.getElementsById(this.value)" /> 
</td></tr> 
</table> 
</body> 
</html>

來源

2013-02-01 ashish

我沒有精力去做的PHP處理我的頭。你能發佈呈現的HTML嗎？ – lonesomeday

<html> 
<head>  
<script> 
    // pass the ID into the method. 
    function removeMore(id) 
    { 
     var elem = document.getElementById(id); // getElementById requires the ID 
     elem.parentNode.removeChild(elem); 
     return false; 
    } 
</script> 
</head> 
<body> 
    <?php 
     $row=5; 
     for($i=1; $i< $row; $i++) 
     { 
      $img_id= "img_".$i; 
      $cap_id= "cap_".$i; 
      $row_id= $i*100; 
      ?> 
       <table> 
        <tr id="<?php echo $row_id;?>"> 
         <td> 
          <input type="file" name="img[]" id="<?php echo $img_id;?>" /> 
         </td> 
         <td> 
          <input type="text" name="cap[]" id="<?php echo $cap_id;?>" /> 
         </td> 
         <td> 
          <input type="button" name="rem_but" id="<?php echo $i; ?>" value="<?php echo $i; ?>" onclick="removeMore(<?php echo $row_id;?>)" /> 
          <!-- You're using PHP - just print the ID in the right place. --> 
         </td> 
        </tr> 
       </table> 
      <?php 
     } 
    ?> 
</body> 
</html>

來源

2013-02-01 13:49:21

謝謝Gareth。我不知道如何在調用js函數時傳遞php值。它工作正常。 – ashish

但是即使沒有在頁面上顯示，它也顯示在源代碼中。由於我必須收集值，所以如果它被完全刪除，那麼我可以收集剩餘的值並提交。但是作爲源代碼顯示他們仍然存在，雖然在html頁面它被刪除。 – ashish

@ashish：就像我回答的那樣，在調用JS函數時，您不需要傳遞任何php值。源代碼顯示它們的原因是因爲這是加載頁面時的樣子。試試開發者控制檯，而不是（在大多數瀏覽器上使用F12） – Cerbrus

你並不需要通過任何ID的行：

試試這個：

function removeMore(element) { 
    var tr = element.parentNode.parentNode; // Get the input's parent <tr> 
    tr.parentNode.removeChild(tr);   // Remove the <tr> from it's parent. 
}

併爲您的按鈕：

<input type="button" name="rem_but" id="some_ID" value="Remove this Row" onclick="removeMore(this)" />

在removeMore，element是按鈕本身。 element.parentNode，是<td>此按鈕，並element.parentNode.parentNode是<tr>它在。

的好處是，你不必到id屬性添加到按鈕，如果你不使用它們放在別的地方。

但是，如果更改表格的結構，此代碼將會中斷。因爲它是現在，這個工程：如果您添加<div>的<input>周圍

<table> 
    <tr> 
     <td> 
      <input type="button" onclick="removeMore(this)" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="button" onclick="removeMore(this)" /> 
     </td> 
    </tr> 
</table>

，例如，你已經添加DOM元素的另一個層面的<tr>和<input>之間，這意味着額外的.parentNode。

來源

2013-02-01 13:51:13 Cerbrus

這是假設他在任何時候都不會隨意更改他的表的結構。 –

@GarethCornish：沒錯，我會在警告中編輯。 – Cerbrus

<script> 
function removeMore(element_id) 
{ 
    var elem = document.getElementById(element_id); 
    elem.parentNode.removeChild(elem); 
    return false; 
} 
</script> 
</head> 

<body> 
<?php 
$row=5; 
for($i=1; $i< $row; $i++) 
{ 
    $img_id= "img_".$i; 
    $cap_id= "cap_".$i; 
    $row_id= "row_".$i*100; 
    ?> 
    <table> 
    <tr id="<?php echo $row_id;?>"> 
     <td><input type="file" name="img[]" id="<?php echo $img_id;?>" /></td> 
     <td><input type="text" name="cap[]" id="<?php echo $cap_id;?>" /></td> 
     <td><input type="button" name="rem_but" id="<?php echo $i; ?>" value="<?php echo $i; ?>" onclick="removeMore('<?php echo $row_id; ?>')" /> 
     </td> 
    </tr> 
    </table> 
    <?php 
} 
?>

來源

2013-02-01 13:55:58

你可以簡單地做，通過使用jQuery：

removeMore = function(id) { 
    element_id = '#' + id + '00'; 
    $(element_id).remove(); 
}

或者不通過ID：

removeMore = function(element) { 
    $(element).parent().remove(); 
} 

<input type="button" onclick="removeMore(this)" value="">

來源

2013-02-01 13:57:06

絕對不需要使用像這樣的jQuery基本DOM操作。 – Cerbrus

我確信所描述的案例是該頁面的唯一用例，這意味着您必須確保爲許多不同的瀏覽器提供相同的功能，尤其是在今天，因爲您對客戶端的使用率很高腳本例如單頁面應用程序。 jQuery可能會創建一些初始的加載開銷，但是它會縮短代碼的數量，並且使它更容易理解JavaScript新手在函數內部會發生什麼。 –

這可能是這樣，但JavaScript新手應該從學習JavaScript開始，而不是一些庫。在跳入'$（'＃myElement'）'之前，這會讓他們考慮效率。我的意思是，如果我每次看到某人不緩存jQuery對象時都有一分錢...... – Cerbrus

想要刪除行onclick

回答

相關問題