Форум

Menshakovich · #1 (**permalink**) 11.09.2018, 22:03

Здравствуйте.Ломаю голову уже который час,но не могу осуществить .У меня есть функция, которая аналогично некоторому контейнеру string (с инпутами и прочими) добавляет такие же контейнеры .Но после этих контейнеров вставляется крестик(т.е. новые контейнеры могут быть удалены пользователем) как это осуществить? Я имею в виду,чтобы удалялась строка нажатого крестика. вот кодики.

<div id="here"><div class="string">
       <input name="one">
        <input name="two">
         </div></div>
       
       <span  id="add">ADD</span>

$('#add').click(function()
      {
        $('#here').append('<div class="string"><input name="one"><input name="two"></div><div name="delete" >&times</div>');    
                    
    $('div [name="delete"]').click(function() {
        
    //  .............. 
    
})  ;
            
      });

j0hnik · #2 (**permalink**) 11.09.2018, 22:14

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div id="here"><div class="string">
		<input name="one">
		<input name="two">
	</div></div>
	<span  id="add">ADD</span>
	<script>
		$('#add').click(function(){
			$('#here').append('<div class="string"><input name="one"><input name="two"><div onclick="$(this).parent().remove();">&times</div></div>');    
		});
	</script>
</body>
</html>

крестик внутрь

Menshakovich · #3 (**permalink**) 11.09.2018, 22:19

Спасибо огромнейшее!!!

рони · #4 (**permalink**) 11.09.2018, 22:20

Menshakovich,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("#add").click(function() {
        var block = $('<div class="string"><input name="one"><input name="two"></div>').appendTo("#here");
        var del = $('<div name="delete" >&times</div>').appendTo("#here");
        del.click(function() {
            del.add(block).remove()
        })
    })
});
  </script>
</head>

<body>
<div id="here"><div class="string">
       <input name="one">
        <input name="two">
         </div></div>

       <span  id="add">ADD</span>

</body>
</html>

рони · #5 (**permalink**) 11.09.2018, 22:28

Сообщение от j0hnik

$('div[name="delete"]').click(function(){ this.parentNode.remove(); });

жуть!!!

сто тысяч обработчиков клика, плюс не работает в ie

j0hnik · #6 (**permalink**) 12.09.2018, 00:05

рони,
Я лишь добавил this.parentNode.remove();
для ie $(this).parent().remove();

рони · #7 (**permalink**) 12.09.2018, 00:36

Сообщение от j0hnik

для ie $(this).parent().remove();

ок!
а

Сообщение от рони

сто тысяч обработчиков клика

убрать?

рони · #8 (**permalink**) 12.09.2018, 00:44

j0hnik,
что бы получить более 100000 обработчиков клика, достаточно нажать кнопку add 447 раз, в вашем варианте.

j0hnik · #9 (**permalink**) 12.09.2018, 01:50

рони,
сумма арифметической прогрессии, знаю

рони · #10 (**permalink**) 12.09.2018, 09:12

Сообщение от j0hnik

знаю

если знаешь, зачем так делаешь? исправь селектор в строке 17.

Форум

Справочник

Discord чат

Курсы javascript