Удалить динамически созданную строку: RemoveChild

HTML:Удалить динамически созданную строку: RemoveChild

<body style='background-color: white;'> 

<div> 
    <div id='dependent'> 
     <input type="button" value="Add" id='abtn' onclick='addfunction()' /> 
     <input type="button" value="Delete" id='dbtn' onclick='deletefunction(this)' /> 
     <input type="button" value="Total No. of rows" id='Button2' onclick='total()'/>  <br /> 

    </div> 
    <div> 
     <input type="button" value="Submit" id='subid' onclick='smt()' /></div> 
</div>

Javascript:

<script type="text/javascript"> 




    function addfunction() { 

     rcount++; 
     t++; 

     tr1 = document.createElement('tr'); 
     tr1.id = "t" + t; 

     tx1 = document.createElement('p'); 
     text1 = document.createTextNode(t); 
     tx1.appendChild(text1); 

     td1 = document.createElement('td'); 
     td1.id = "da" + t; 

     c1 = document.createElement('input'); 
     c1.type = "checkbox"; 
     c1.id = "a" + t; 

     td2 = document.createElement('td'); 
     td2.id = "db" + t; 
     c2 = document.createElement('input'); 
     c2.type = "checkbox"; 
     c2.id = "b" + t; 

     td3 = document.createElement('td'); 
     td3.id = "dc" + t; 
     c3 = document.createElement('input'); 
     c3.type = "checkbox"; 
     c3.id = "c" + t; 


     dl1 = document.createElement('input'); 
     dl1.type = "button"; 
     dl1.id = "dl" + t; 
     dl1.onclick = deletefunction; //Delete button for each row 

     br1 = document.createElement('br'); 

     document.getElementById("dependent").appendChild(tr1); 
     document.getElementById(tr1.id).appendChild(tx1); 
     document.getElementById(tr1.id).appendChild(td1); 
     document.getElementById(td1.id).appendChild(c1); 
     document.getElementById(tr1.id).appendChild(td2); 
     document.getElementById(td2.id).appendChild(c2); 
     document.getElementById(tr1.id).appendChild(td3); 
     document.getElementById(td3.id).appendChild(c3); 
     document.getElementById(tr1.id).appendChild(dl1); 
     document.getElementById(tr1.id).appendChild(br1); 



//Delete Function 
    function deletefunction() { 
     alert('tr' + rcount); 
     document.getElementById('tr' + rcount).removeNode(true); 

    } 




</script> 
</body> 
</html>

Как удалить динамически созданный строку (или 'тр') с помощью JavaScript?

Я попытался удалить его двумя способами,

Самостоятельное удаление кнопки, которая будет удалить последнюю строку.
Удалить кнопку в каждой строке, чтобы удалить эту конкретную строку.

Я пробовал различные вещи, но никто не работает, я получаю ошибки, как " Unable to get value of the property 'removeNode': object is null or undefined".

источник

2013-06-11 Vignesh Paramasivam

Вы получите дополнительную помощь, если вы можете найти способ упростить код, в результате чего просто соответствующие биты на первый план. –

Можете ли вы имитировать то же самое на http: //jsfiddle.net, посмотрите на это – dreamweiver

@levi Botelho - Спасибо за ваше предложение, я отредактировал свой код, думаю, его проще просмотреть. –

Попробуйте что-то вроде этого:

var row = document.getElementById('tr' + rcount); 
row.parentElement.removeChild(row);

Это также выглядит, как вы не образуя id из tr правильно. Вы создали это так:

tr1.id = "t" + t;

затем пытается прочитать:

document.getElementById('tr' + rcount)

Также rcount, кажется, не то, что вы ожидаете. Это глобальная переменная, имеющая то же значение, когда в последний раз выполняется addfunction().

источник

2013-06-11 07:21:45 Teemu

При попытке вашего кода возникла следующая ошибка: «Ошибка выполнения Microsoft JScript: невозможно получить значение свойства« parentElement »: объект имеет значение null или undefined» –

@Vignesh Когда вы вызываете «id», это 'rcount' меняется с разными строками? Теперь похоже, что это была глобальная переменная, которая всегда будет иметь последнее значение, назначенное во время выполнения 'deletefunction()'. – Teemu

no rcount не изменяется, но даже если rcount не изменяется, он должен удалить последнюю строку, которая добавлена обрядом? то есть идентификатор строки будет, например,. 'tr' + rcount = tr4, поэтому он удалит последнюю строку (tr4). –

Попробуйте один

var parNode=document.getElementById("dependent"); 
parNode.removeChild(parNode.childNodes[rowCount]);

Просто предоставьте сверку

источник

2013-06-11 07:30:37

Здесь rowCount удаляет элементы внутри DIV, а не динамически создаваемые строки (например, удаляет кнопку удаления, пробелы и т. Д.) –

Но вы добавляете новые строки с тэгом? –

Да, я добавляю тэг-теги. –

Литтл дополнение к @Teemu ответ, для этого случая: кнопка Delete на каждой строке, чтобы удалить эту конкретную строку. -> одиночная кнопка. Поскольку rcount не возвращает желаемое значение ... Чтобы удалить несколько строк, возможно добавить дополнительный флажок ...

Итак, это работает, только если вы нажмете кнопку «Удалить» в каждой строке.

 function deletefunction() { 


    id= $(this).attr('id'); 

    fin = id.replace(/\D+/, ''); 





    var row = document.getElementById('tr' + fin); 
row.parentElement.removeChild(row); 



    }

Кроме того, скрипт не возвращает правильное число строк ... он подсчитывает удаленные строки тоже ...

источник

2013-06-11 08:16:46 sinisake

Удалить динамически созданную строку: RemoveChild

ответ

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