创建一个删除HTML元素的函数

时间:2017-11-21 21:00:58

标签: javascript jquery html

我有来自@Snowmonkey

的代码



static void Sakiniai (string fv, string skyrikliai)
    {
        char[] skyrikliaiSak = { '.', '!', '?' };

        string[] lines = File.ReadAllLines(fv, Encoding.GetEncoding(1257));
        string naujas = "";

        foreach (string line in lines)
        {
            naujas += line;
            naujas += " ";
        }

        string[] sakiniai = naujas.Split(skyrikliaiSak);
        for(int i = 0; i < sakiniai.Length; i++)
        {
            Console.WriteLine(sakiniai[i]);
        }

    }
&#13;
&#13;
&#13;

当单击添加行按钮时代码添加新行。我想在按钮上添加一个类似的功能&#39;删除行&#39;。如果单击它,我希望删除最后一行,而不影响其他文本框中的内容。我试过这个,但它不起作用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#submitBtn").on("click", submitted);
  // Created an 'add new row' button, which non-destructively adds a row to the container.
  $(".add-row-btn").on("click", function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      $(".container").append(createNewRow());
    })
    
    // When the user chooses a different number, completely reset all the rows?
  $('#amount').on('change', function() {
    // Save a reference to the row container.
    var containerEl = $(".container");
    // wipe out completely the contents of the container.
    containerEl.empty();
    // get the number of rows to be created.
    var startingNumberOfLines = parseInt($("#amount").val());
    // loop the number of times requested, and append a new row each time.
    //   createNewRow() is defined below.
    for (var i = 0; i < startingNumberOfLines; i++) {
      $(".container").append(createNewRow());
    }
  });
  // Start with an initial value.
  $(".add-row-btn").trigger("click");
})


/*****
 * createNewRow() -- function to create a new row, composed of a text input,
 *    and two labels containing number inputs.
 *****/
var createNewRow = function() {
  /****
   * first, we'll define all the elements that will be placed
   *  in this row -- the text input, the labels and the inputs.
   ****/
  var lineTitleEl = $("<input>").attr("placeholder", "enter text here")
    .addClass("line-title");
  var labelEl = $("<label>");
  var inputEl = $("<input>").attr("step", "0.05").attr("type", "number")
    .addClass("line-number");

  // The firstNumberEl is a label containing an input. I can simply
  //   clone my label el, and input el, and use them. Don't need to,
  //   but i CAN.
  var firstNumberEl = labelEl.clone();
  firstNumberEl.text("number1: ").attr("class", "first-number-el").append(inputEl.clone());

  var secondNumberEl = labelEl.clone();
  secondNumberEl.text("number2: ").attr("class", "second-number-el").append(inputEl.clone());

  // Now create the row, which is a div containing those elements.
  var newRowEl = $("<div>").append(lineTitleEl, firstNumberEl, secondNumberEl);

  // Simply return that row -- the user can send it to the console or
  //  can append it wherever they like.
  return newRowEl;
}

/******
 * submitted() -- function to handle the submit button. We want to 
 *   iterate over all the rows, and given that they now have a consistent
 *   format, parse out the required data and display it.
 ******/
function submitted() {
  console.log("submitted");
  $(".container").children("div").each(function() {
    var title = $(this).find(".line-title").val();
    var firstNum = $(this).find(".first-number-el input").val();
    var secondNum = $(this).find(".second-number-el input").val();
    console.log(title + ", " + firstNum + ", " + secondNum);
  })

}
</script>
<style>
.line-title {
  width: 259px;
  margin: 0px;
  height: 15px;
  clear: left;
}

.line-number {
  width: 45px;
}

.container {
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset style=" margin: 0 0 5px 0;">
    <!--<div>enter amount of text + number boxes:
      <input id="amount" step="1" style=" width: 45px;" type="number" value="1">
    </div>-->
    <div class="container">

    </div>
    <button class="add-row-btn">
      Add row
    </button>
    <button class="remove-row-btn">
      Remove row
    </button>
    <input class="button" id="submitBtn" style="margin-left: 85%;" type="button" value="Submit">
  </fieldset>
</form>

我该怎么做? 感谢。

1 个答案:

答案 0 :(得分:1)

您可以索引最后一个元素并将其删除。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#submitBtn").on("click", submitted);
  // Created an 'add new row' button, which non-destructively adds a row to the container.
   $(".add-row-btn").on("click", function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      $(".container").append(createNewRow());
    })
    
    $(".remove-row-btn").on("click", function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      $(".container div").eq($(".container div").length - 1).remove();
    })
    
    // When the user chooses a different number, completely reset all the rows?
  $('#amount').on('change', function() {
    // Save a reference to the row container.
    var containerEl = $(".container");
    // wipe out completely the contents of the container.
    containerEl.empty();
    // get the number of rows to be created.
    var startingNumberOfLines = parseInt($("#amount").val());
    // loop the number of times requested, and append a new row each time.
    //   createNewRow() is defined below.
    for (var i = 0; i < startingNumberOfLines; i++) {
      $(".container").append(createNewRow());
    }
  });
  // Start with an initial value.
  $(".add-row-btn").trigger("click");
})


/*****
 * createNewRow() -- function to create a new row, composed of a text input,
 *    and two labels containing number inputs.
 *****/
var createNewRow = function() {
  /****
   * first, we'll define all the elements that will be placed
   *  in this row -- the text input, the labels and the inputs.
   ****/
  var lineTitleEl = $("<input>").attr("placeholder", "enter text here")
    .addClass("line-title");
  var labelEl = $("<label>");
  var inputEl = $("<input>").attr("step", "0.05").attr("type", "number")
    .addClass("line-number");

  // The firstNumberEl is a label containing an input. I can simply
  //   clone my label el, and input el, and use them. Don't need to,
  //   but i CAN.
  var firstNumberEl = labelEl.clone();
  firstNumberEl.text("number1: ").attr("class", "first-number-el").append(inputEl.clone());

  var secondNumberEl = labelEl.clone();
  secondNumberEl.text("number2: ").attr("class", "second-number-el").append(inputEl.clone());

  // Now create the row, which is a div containing those elements.
  var newRowEl = $("<div>").append(lineTitleEl, firstNumberEl, secondNumberEl);

  // Simply return that row -- the user can send it to the console or
  //  can append it wherever they like.
  return newRowEl;
}

/******
 * submitted() -- function to handle the submit button. We want to 
 *   iterate over all the rows, and given that they now have a consistent
 *   format, parse out the required data and display it.
 ******/
function submitted() {
  console.log("submitted");
  $(".container").children("div").each(function() {
    var title = $(this).find(".line-title").val();
    var firstNum = $(this).find(".first-number-el input").val();
    var secondNum = $(this).find(".second-number-el input").val();
    console.log(title + ", " + firstNum + ", " + secondNum);
  })

}
</script>
<style>
.line-title {
  width: 259px;
  margin: 0px;
  height: 15px;
  clear: left;
}

.line-number {
  width: 45px;
}

.container {
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset style=" margin: 0 0 5px 0;">
    <!--<div>enter amount of text + number boxes:
      <input id="amount" step="1" style=" width: 45px;" type="number" value="1">
    </div>-->
    <div class="container">

    </div>
    <button class="add-row-btn">
      Add row
    </button>
    <button class="remove-row-btn">
      Remove row
    </button>
    <input class="button" id="submitBtn" style="margin-left: 85%;" type="button" value="Submit">
  </fieldset>
</form>