Удаления и добавления елементов jquery (button, li)

126

27 мая 2018, 01:50

Мне нужно при нажатии на "удалить", удалять елемент li вместе с кнопкой delete и edit, но ничего не выходит.

var counter = 0; 
$("#myb").click(function() { 
  alert("ee"); 
  var text = $("#myp").val(); 
 
  $("#myid").append("<p><li  id='" + counter + "'>" + text + "   " + "<button type='button'  id='delete_" + counter + "'>" + "delete" + "</button>" + "   " + "<button type='button' id='edit_" + counter + "'>" + "edit" + "</button>" + "</li></p>"); 
  $("#myp").val(" "); 
  counter++; 
 
 
  $("#delete_0").click(function() { 
    ("li").remove(); 
  }) 
  $("#ed").append("<input heidth='50px' wigth= '50px' type='text' id='re'/>"); 
 
  $("#edit_0").click(function() { 
    var s = $("#0").innerText(); 
    $("#ed").apppend("<p> " + s + "</p>") 
 
  }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="myid"> </p> 
<input type="text" id="myp" /> 
<button type="button" id="myb">Add</button> 
 
<center> 
  <p id="ed"> </p> 
</center>

Answer 1

let ulEl = $('ul'); 
$('#addNewItemBtn').on('click', function(e){ // Слушаем кнопку добавления 
  let item = $('#newItem'); 
  let text = item.val().trim(); 
   
  if(text.length) { // Если есть текст - добавляем 
    ulEl.append(`<li><span>${text}</span> <input type='button' class='removeBtn' value='Remove' /></li>`); 
    item.val(''); 
  } 
}); 
 
ulEl.on('click', '.removeBtn', function(e){ // Слушаем нажатие на кнопку удаления 
  $(this).parent('li').remove(); // Ищем предка li (у каждой кнопки он свой) и удаляем его 
});

ul { 
  list-style: none; 
  margin: 0; padding: 0; 
  padding-bottom: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul></ul> 
<input type='text' id='newItem' /> 
<input type='button' id='addNewItemBtn' value='Add' />

Answer 2

var counter = 0; 
$("#myb").click(function(){ 
  var text=$("#myp").val(); 
  var cC = counter++; 
 
  $("#myid").append("<p><li  id='"+cC+"'>"+text+"   " +"<button type='button'  id='delete_"+cC+"'>"+ "delete"+"</button>"+"   " +"<button type='button' id='edit_"+cC+"'>"+ "edit"+"</button>" +"</li></p>"); 
  $("#myp").val(" "); 
 
 
  $("#delete_"+cC).click(function (){ 
    $("#"+cC).remove(); 
  }) 
  $("#ed").append("<input heidth='50px' wigth= '50px' type='text' id='re'/>"); 
 
  $("#edit_"+cC).click(function (){ 
      var s=$("#0").innerText(); 
    $("#ed").apppend("<p> "+s+"</p>") 
 
  }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="myid"> </p> 
<input type="text" id="myp"/> 
<button type="button" id="myb">Add</button> 
 
<center> <p id="ed"> </p></center>