想要删除行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

回答

相关问题