Увеличение идентификатора поля html [дубликат]

Много хороших ответов, но вот еще один;)

Вы можете добавить обработчик для щелчка по таблице

<table id = 'dsTable' onclick="tableclick(event)">

И затем просто узнать, события было

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

. Тогда вам не нужно добавлять обработчики событий для каждой строки, а ваш html выглядит аккуратно. Если вам не нужен javascript в вашем html, вы даже можете добавить обработчик при загрузке страницы:

document.getElementById('dsTable').addEventListener('click',tableclick,false);

Вот рабочий код: http: //jsfiddle.net/hX4f4/2/

jQuery имеет хорошую функцию для удаления элементов из DOM .

Функция ближайшая () классная, потому что она «получит первый элемент, который соответствует селектору, путем тестирования самого элемента и прохождения его через своих предков ».

$(this).closest("tr").remove();

Каждая кнопка удаления может запускать этот очень сжатый код с вызовом функции.

Я предлагаю использовать jQuery. То, что вы делаете прямо сейчас, легко достичь без jQuery, но поскольку вам понадобятся новые функции и больше функциональности, jQuery сэкономит вам много времени. Я также хотел бы упомянуть, что у вас не должно быть нескольких элементов DOM с одинаковым идентификатором в одном документе. В этом случае используйте атрибут класса.

html:

<table id="dsTable">
  <tr>
     <td> Relationship Type </td>
     <td> Date of Birth </td>
     <td> Gender </td>
  </tr>
  <tr>
     <td> Spouse </td>
     <td> 1980-22-03 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

javascript:

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

Помните, что вам нужно ссылаться на jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Здесь приведен рабочий пример jsfiddle: http://jsfiddle.net/p9dey/1/

Вот код JS Bin с помощью jQuery. Протестировано во всех браузерах. Здесь мы должны щелкнуть строки, чтобы удалить их с прекрасным эффектом. Надеюсь, это поможет.

Привет, я бы сделал что-то вроде этого:

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

, и у меня была бы такая таблица:

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

Также, если вы хотите, создать таблицу. Таким образом, будет легко построить таблицу. То же самое можно сделать при редактировании:)

Я бы попробовал правильно форматировать вашу таблицу так:

Не могу не думать, что форматирование таблицы может, по крайней мере, не нанести вреда.

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>