删除javascript中动态创建的行_Javascript

删除javascript中动态创建的行

javascript

删除javascript中动态创建的行,javascript,Javascript,我有一个脚本，可以在单击按钮时创建新行。现在，我将如何向每一行添加delete，以便在单击时删除该行。我的脚本如下： <html> <head> <link rel="stylesheet" type="text/css" href="style1.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><

我有一个脚本，可以在单击按钮时创建新行。现在，我将如何向每一行添加delete，以便在单击时删除该行。我的脚本如下：

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
           $('button').click(function() {
       $(this).parents('tr').remove();
       });
      </script>

     <script type="text/javascript">
        function addTextArea(){
        var div = document.getElementById('div_quotes');
        var temp = document.createElement('div');
        temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><button>Delete</button></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='40%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
        div.appendChild(temp );
    }
     </script>
   </head>
    <body>
    <form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECT">
    <div id="div_quotes">
    <table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
    <tr bgcolor='#E6E6FA'>
    <td width='6%'></td>
    <td width='6%'>Slno</td>
    <td width='39%'>Item Name</td>
    <td width='6%'>Qty</td>
    <td width='9%'>Units</td></tr>
    </table>
    </div>
    <br />

    <input type="button" value="Click to add More Items" onClick="addTextArea();">
    <input type="submit" name="submitted" value="Submit">
    </form>
    </body>
    </html>


$（“按钮”）。单击（函数（）{
$（this.parents（'tr'）.remove（）；
});
函数addTextArea（）{
var div=document.getElementById（'div_quotes'）；
var temp=document.createElement（'div'）；
temp.innerHTML=“删除”；
儿童分部（临时）；
}
斯尔诺
项目名称
数量
单位

如果每行（在

td

中）都有一个按钮，您可以找到并删除它的祖父母（

tr

）：

$（“按钮”）。单击（函数（）{
$（this.parents（'tr'）.remove（）；
});

斯尔诺
项目名称
数量
单位
xyz
xyz
xyz
xyz
删除
123
123
123
123
删除
abc
abc
abc
abc
删除
首先创建一个函数行删除（链接）

并在生成删除

这是您的完整代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">

    <script type="text/javascript">

    function addTextArea(){
    var div = document.getElementById('div_quotes');
    var temp = document.createElement('div');
    temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onclick='rowDelete(this); return false;'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
    div.appendChild(temp );
}
    function rowDelete(link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }
    </script>

</head>
<body>
<form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECTRONICS INC">
<div id="div_quotes">
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
<tr bgcolor='#E6E6FA'>
<td width='5%'></td>
<td width='6%'>Slno</td>
<td width='39%'>Item Name</td>
<td width='6%'>Qty</td>
<td width='9%'>Units</td></tr>
</table>
</div>
<br />

 <input type="button" value="Click to add More Items" onClick="addTextArea();">
<input type="submit" name="submitted" value="Submit">
</form>
</body>
</html>


函数addTextArea（）{
var div=document.getElementById（'div_quotes'）；
var temp=document.createElement（'div'）；
temp.innerHTML=“”；
儿童分部（临时）；
}
函数行删除（链接）{
var row=link.parentNode.parentNode；
var table=row.parentNode；
表2.removeChild（世界其他地区）；
}
斯尔诺
项目名称
数量
单位



如果有任何问题，请告诉我
快乐编码：）
为了我自己的理智，我将忽略所有可以改进代码的事情，只是以类似的方式回答问题：
你应该可以用这个替换你的部分
<script type="text/javascript">

var i = 1;

function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table id='row" + i + "' width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onClick='removeRow(&#39;row" + i + "&#39;)'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
div.appendChild(temp );
i++;
}
    function removeRow(rowId)
    {
        var rowToRemove = document.getElementById(rowId);
        //Might want to do some error checking
        rowToRemove.parentNode.removeChild(rowToRemove);
    }
    </script>


var i=1；
函数addTextArea（）{
var div=document.getElementById（'div_quotes'）；
var temp=document.createElement（'div'）；
temp.innerHTML=“”；
儿童分部（临时）；
i++；
}
函数删除程序（rowId）
{
var rowToRemove=document.getElementById（rowId）；
//可能需要执行一些错误检查
rowToRemove.parentNode.removeChild（rowToRemove）；
}
有谁能帮忙吗？可能重复：我可以看到许多与此相关的事件。我试过了。它不起作用。所以把它贴在这里。无论如何，谢谢你提供的信息。非常感谢索拉夫。你是国王…-）
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">

    <script type="text/javascript">

    function addTextArea(){
    var div = document.getElementById('div_quotes');
    var temp = document.createElement('div');
    temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onclick='rowDelete(this); return false;'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
    div.appendChild(temp );
}
    function rowDelete(link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }
    </script>

</head>
<body>
<form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECTRONICS INC">
<div id="div_quotes">
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
<tr bgcolor='#E6E6FA'>
<td width='5%'></td>
<td width='6%'>Slno</td>
<td width='39%'>Item Name</td>
<td width='6%'>Qty</td>
<td width='9%'>Units</td></tr>
</table>
</div>
<br />

 <input type="button" value="Click to add More Items" onClick="addTextArea();">
<input type="submit" name="submitted" value="Submit">
</form>
</body>
</html>

<script type="text/javascript">

var i = 1;

function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table id='row" + i + "' width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onClick='removeRow(&#39;row" + i + "&#39;)'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
div.appendChild(temp );
i++;
}
    function removeRow(rowId)
    {
        var rowToRemove = document.getElementById(rowId);
        //Might want to do some error checking
        rowToRemove.parentNode.removeChild(rowToRemove);
    }
    </script>